本文描述了用vue实现的组件之间的通信功能。分享给大家参考，如下：

兄弟组件之间的通信(事件)

借助于Vue的一个公共实例对象，不同的组件可以通过这个对象完成事件的绑定和触发

var bus=new Vue()；公交车。$emit()总线。$on()熊大想给熊二发消息。

接收者(熊二):事件绑定

公交车。$ on('自定义事件'，函数(msg) {//msg是通过事件传递的数据}) Sender (Xiong Da):触发事件

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

给熊二加个按钮，告诉熊大：‘快跑！’

接收方：事件绑定发送方：触发事件

！doctype html html Head meta charset=' UTF-8 ' title/title script src=' http :https://cdn . bootss.com/vue/2 . 0 . 1/Vue . min . js '/script/Head body div id=' container ' p { { msg } }/p Xiong da/Xiong da HR Xiong er/Xiong er/div script/*借助于Vue的一个公共实例对象，不同的组件可以通过这个对象来绑定和触发事件*///新建一个对象，//雄大向雄二发送消息//雄大组件vue.component('雄大'，{ Methods : { SendToxionger 3360 Function()}//向雄二发送消息//触发msgtoxonger事件总线。$ emit(' msgtoxinger '，'哈哈，光头强来了')}，template:` div h1我是Xiong Da/h1 button @ click=' sentoxionger ' click me/button/div `})//Xiong Er component vue.component(' Xiong Er '，{template3360 ` divh1I我是Xiong Er/h1/div `，mounted : function(){//将自定义事件和相应的处理函数绑定到组件//，在bus//中调用on方法事件的触发器一般是接收公交车。$ on(' msgtoxinger '，函数(msg) {alert('自定义事件触发器，接收数据' msg ')；})})new vue({ El : ' # container '，data : { msg : ' hello vuejs ' })/script/body/HTML使用在线HTML/CSS/JavaScript代码运行该工具：http://tools.jb51.net/code/HtmlJsRun测试，可以获得以下运行结果：

修订：熊大在输入端输入数据，并传送给熊二

！doctype html html head meta charset=' UTF-8 ' title/title script src=' http :https://cdn。布斯。com/vue/2。0 .1/vue。量滴js '/script/head body div id=' container ' p { { msg } }/p大星/大星HR xinger/div script/*借助于一个公共的某视频剪辑软件的实例对象，不同的组件可以通过该对象完成事件的绑定和触发*///新一个对象，兄弟间的通信，将借助他事件绑定和触发来实现var bus=new Vue()；//熊大发送消息给熊二//雄达组件Vue.component('xiongda '，{ data : function(){ return { Xiong dain put : ' ' })，methods : { sendtoxionger : function(){//给熊二发送消息//触发msgToXiongEr事件公共汽车$ emit(' msgtoxinger '，这个。雄鸟放)；这个。雄鸟放=' ';} }，template:` div h1我是熊大/h1输入类型='text' v-model='雄鸟放入“/button @ click=' sendToXiongEr '单击Me/button/div ` })//熊二组件Vue.component('xionger '，{ data : function(){ return { recvmsgis :[]} }，template:` div h1我是熊二/h1 p v-for=' tmp in recvMsgIs ' { tmp } }/p/div `,挂载的：函数(){//给该组件绑定一个自定义事件和对应的处理函数//调用公共汽车中的在方法//事件的触发一般是接收数据然后处理变量=这个；公共汽车$ on(' msgtoxinger '，函数(消息){//警报('自定义的事件触发，接收到的数据味精);那个。recvmsgis。推送(msg)；}) } })新Vue({ el:'#container '，data : { msg : ' Hello VueJs ' })/脚本/正文/html感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码的运行效果。

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