vue组件之间通信实例总结(点赞功能)


Posted in Javascript onDecember 05, 2018

本文实例讲述了vue组件之间通信。分享给大家供大家参考,具体如下:

总结:

父组件--》子组件

①通过属性

步骤1:

<son myName="michael" myPhone='123'></son>
<son :myName="userList[0]"></son>

步骤2:

Vue.component('son',{
props:['myName','myPhone']
})

②通过$parent

直接在子组件中通过this.$parent得到调用子组件的父组件

子组件--》父组件

①events up

步骤1:在父组件中 调用子组件的时候 绑定一个自定义事件 和 对应的处理函数

methods:{
recvMsg:function(msg){

//msg就是传递来的数据

}
},
template:'
<son @customEvent="recvMsg"></son>
'

步骤2:在子组件中 把要发送的数据通过触发自定义事件传递给父组件

this.$emit('customEvent',123)

②$refs

reference 引用

步骤1:在调用子组件的时候 可以指定ref属性

<son ref='zhangsan'></son>

步骤2:通过$refs得到指定引用名称对应的组件实例

this.$refs.zhangsan

兄弟组件通信

步骤1:创建一个Vue的实例 作为事件绑定触发的公共的对象

var bus = new Vue();

步骤2:在接收方的组件 绑定 自定义的事件

bus.$on('customEvent',function(msg){
//msg是通过事件传递来的数据 (传递来的123)
});

步骤3:在发送方的组件 触发 自定义的事件

bus.$emit('customEvent',123);

每日一练:

创建2个组件,main-component,son-component

视图:

main-component 显示一个按钮
son-component 显示一个p标签

功能:

main-component 定义一个变量count,初始化为0,将count传递给son-component,son-component接收到数据显示在p标签中

main-component 在点击按钮时,实现对count的自增操作,要求son-component能够实时显示count对应的数据

son-component在接收到count之后,在count大于10的时候,将main-component的按钮禁用掉
(参考:<button v-bind:disabled="!isValid">clickMe</button>)

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>3water.com 小练习</title>
  <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <main-component></main-component>
  </div>
  <script>
  /*
    每日一练:
创建2个组件,main-component,son-component
视图:
 main-component 显示一个按钮
 son-component 显示一个p标签
功能:
  main-component 定义一个变量count,初始化为0,将count传递给son-component,son-component接收到数据显示在p标签中
  main-component 在点击按钮时,实现对count的自增操作,要求son-component能够实时显示count对应的数据
  son-component在接收到count之后,在count大于10的时候,将main-component的按钮禁用掉
  (参考:<button v-bind:disabled="!isValid">clickMe</button>)
  */
//创建父组件
    Vue.component("main-component",{
      data:function(){
        return {
          count:0,
          isDisabled:true
        }
      },
      methods:{
        //点击按钮对count进行自增
        //并通过$emit触发countAdd,并把count的值传递给子组件
        //判断count==10的时候让按钮禁用
        countAdd:function(){
          this.count++;
          console.log("对数据进行自增:"+this.count);
          this.$emit("countAdd",this.count);
        }
      },
      template:`
        <div>
          <button @click="countAdd" v-bind:disabled="!isDisabled">点我</button>
          <son-component v-bind:myCount="count"></son-component>
        </div>
      `
    })
//创建子组件
    Vue.component("son-component",{
      //通过props接收父组件传递过来的值
      props:["myCount"],
      template:`
        <div>
          <p>{{myCount}}</p>
        </div>
      `,
      //数据更新完成后判断从父组件拿到的值
      updated:function(){
        if(this.myCount>10){
          //子组件通过$parent直接获取父组件的数据
            this.$parent.isDisabled = false;
          }
      }
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,可得到如下运行效果:

vue组件之间通信实例总结(点赞功能)

感兴趣的朋友还可以使用上述在线工具测试一下代码的运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
JS简单随机数生成方法
Sep 05 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 #Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 #Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 #Javascript
vue-cli3搭建项目的详细步骤
Dec 05 #Javascript
详解vue中async-await的使用误区
Dec 05 #Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 #Javascript
使用FormData实现上传多个文件
Dec 04 #Javascript
You might like
php初始化对象和析构函数的简单实例
2014/03/11 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
node.js的事件机制
2017/02/08 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
Python中类的初始化特殊方法
2017/12/01 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
phpquery中文手册
2021/03/18 PHP
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
小学教育毕业生自荐信
2013/11/18 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年话务员工作总结
2014/11/19 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
MySQL触发器的使用
2021/05/24 MySQL