<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <dom-a></dom-a> <dom-b></dom-b> <dom-c></dom-c> </div> <script src="vue.js"></script> <script type="text/javascript"> var Event = new Vue(); var A = { data() { return { a: '我是a组件中的数据' } }, template: ` <div> <span>我是A组件的数据->{{a}}</span> <input type="button" value = '把A数据传给C' @click = 'send'/> </div> `, methods: { send() { // $emit('事件名字',数据) // this.$emit() console.log(this); Event.$emit('a-msg',this.a); } } }; var B = { data() { return { b: '我是b组件中的数据' } }, template: ` <div> <span>我是A组件的数据->{{b}}</span> <input type="button" value = '把B数据传给C' @click = 'send'/> </div> `, methods: { send() { // $emit('事件名字',数据) // this.$emit() console.log(this); Event.$emit('b-msg',this.b); } } }; var C = { data(){ return { a:'', b:'' } }, template:` <div> <h3>我是C组件</h3> <span>接收A组件的数据为：{{a}}</span> <br /> <span>接收B组件的数据为：{{b}}</span> </div> `, mounted(){ // 接收A中的数据 // $on('事件名',fn(a)) Event.$on('a-msg',(a)=>{ this.a = a; }); // 接收A中的数据 Event.$on('b-msg',(b)=>{ this.b = b; }); }, } new Vue({ el: '#app', components: { 'dom-a': A, 'dom-b': B, 'dom-c': C } }) </script> </body> </html>