本文中的一个例子讲述了vue组件之间的通信。分享给大家参考，如下：

总结：

父组件->子组件

1)通过属性

第一步：

儿子我的名字='迈克尔'我的电话=' 123 '/儿子儿子儿子：我的名字='用户列表[0]'/儿子步骤2:

Vue。合伙人('儿子'，{props: ['我的名字'，'我的电话']}) 通过$parent

通过此直接获取调用子组件的父组件。子组件中的$parent

子组件->父组件

事件向上

第一步：在父组件中调用子组件时，绑定自定义事件和相应的处理函数

方法： {recvmsg :函数(msg) {//msg是传递的数据}}，模板： ' son @ customevent=' recvmsg '/son '步骤2:通过触发子组件中的自定义事件，将待发送的数据传递给父组件

这个。$emit('customEvent '，123)$refs

参考文献

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

Son ref='张山'/son步骤2:通过$refs获取指定引用名称对应的组件实例

这个。参考文献。张山哥哥组件通信

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

var bus=new Vue()；步骤2:在接收者的组件上绑定用户定义的事件

公交车。$ on ('custom event '，function (msg) {//msg是事件传递的数据(传递了123)})；步骤3:在发送方组件触发用户定义的事件

公共汽车。$emit('customEvent '，123)；每天练习一次：

创建两个组件，主组件和子组件

视图：

主组件显示一个按钮子组件显示一个p标签

功能：

Main-component定义了一个变量count，该变量被初始化为0，并将该计数传递给son-component，son-component接收的数据显示在p标记中

当主组件点击按钮时，实现计数的自增操作，并要求子组件实时显示计数对应的数据

当接收到计数后计数大于10时，子组件禁用主组件按钮(引用：button v-bind:disabled='！isValid ' click me/按钮)

！doctype html html head meta charset=' UTF-8 ' titlewww.jb51.net小练习/title脚本src=' http :https://cdn。bootcss。com/vue/2。0 .1/vue。量滴js '/script/head body div id=' container ' p { { msg } }/p main-component/main-component/div script/*每日一练：创建2个组件主分量、子分量视图：主要部件显示一个按钮子分量显示一个p标签功能：主要部件定义一个变量数数，初始化为0,将数数传递给子组件，子组件接收到数据显示在p标签中主要成分在点击按钮时，实现对数数的自增操作，要求子分量能够实时显示数数对应的数据子分量在接收到数数之后，在数数大于10的时候，将主要成分的按钮禁用掉（参考：按钮v-bind:disabled='！存在有效的"单击我/按钮)*////创建父组件Vue.component('main-component '，{ data : function(){ return { count :0，isDisabled:true } }，methods:{ //点击按钮对数数进行自增//并通过$emit触发countAdd，并把数数的值传递给子组件//判断计数==10的时候让按钮禁用count add : FuncTion(){ this。计数；console.log('对数据进行自增：“这个。计数)；这个$emit('countAdd '，这个。计数)；} }，模板： ' div按钮@ click=' count add ' v-bind : disabled='！'' isDisabled '点我/按钮子组件v-Bind : myCount=' count '/子组件/div ` })//创建子组件Vue.component('son-component '，{ //通过小道具接收父组件传递过来的值道具：['我的计数'，模板： ' div p { {我的计数} }/p/div `，//数据更新完成后判断从父组件拿到的值更新了：函数(){ if(this。mycount 10){//子组件通过$家长直接获取父组件的数据这个$ parent.isDisabled=false} })新Vue({ el:'#container '，data : { msg : ' Hello VueJs ' })/脚本/正文/html使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试，可得到如下运行效果：

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

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