vm.$on( event, callback )：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$emit( event, […args] )：触发当前实例上的事件。附加参数都会传给监听器回调。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type="text/javascript"> //准备一个空的实例对象 var Event = new Vue(); //组件A var A = { template: ` <div> <span>我是A组件的数据->{{a}}</span> <input type="button" value="把A数据传给C" @click = "send"> </div> `, methods: { send () { Event.$emit("a-msg", this.a); } }, data () { return { a: "我是a组件中数据" } } }; //组件B var B = { template: ` <div> <span>我是B组件的数据->{{a}}</span> <input type="button" value="把B数据传给C" @click = "send"> </div> `, methods: { send () { Event.$emit("b-msg", this.a); } }, data () { return { a: "我是b组件中数据" } } }; //组件C var C = { template: ` <div> <h3>我是C组件</h3> <span>接收过来A的数据为: {{a}}</span> <br> <span>接收过来B的数据为: {{b}}</span> </div> `, mounted () { //接收A组件的数据 Event.$on("a-msg", function (a) { this.a = a; }.bind(this)); //接收B组件的数据 Event.$on("b-msg", function (a) { this.b = a; }.bind(this)); }, data () { return { a: "", b: "" } } }; window.onload = function () { new Vue({ el: "#box", components: { "dom-a": A, "dom-b": B, "dom-c": C } }); }; </script></head><body> <div id="box"> <dom-a></dom-a> <dom-b></dom-b> <dom-c></dom-c> </div></body></html>新建bus.jsimport Vue from 'vue'export var bus = new Vue()App.vue里created方法里定义事件import { bus } from 'bus.js'// ...created () { bus.$on('tip', (text) => { alert(text) })}Test.vue组件内调用import { bus } from 'bus.js' // ...bus.$emit('tip', '123')备注：on和emit的事件必须是在一个公共的实例上，才能触发。
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on。
父组件可以使用 props 把数据传给子组件；子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件；vm.$on( event, fn );//监听event事件后运行。
联系客服
