效果图：
注：$emit 和 $on 的事件必须在一个公共的实例上，才能够触发；
$emit 触发
$on 接收
需求：
1、有A、B、C三个组件，同时挂载到入口组件中；
2、将A组件中的数据传递到C组件，在将B组件中的数据传递到C组件；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 <body> 12 <div id="app" class="container"> 13 <dom-a></dom-a> 14 <dom-b></dom-b> 15 <dom-c></dom-c> 16 </div> 17 <script> 18 var event = new Vue(); 19 var A = { 20 data(){ 21 return { 22 a:'我是A组件数据【天王盖地虎】' 23 } 24 }, 25 template:'<div><span>A组件数据->{{a}}</span><button class="btn btn-info" @click="send">将数据传递给C组件</button></div>', 26 methods: { 27 send(){ 28 //$emit('事件名称',数据); 29 //为什么不用this.$emit 根本传输不了值，需要挂载到一个公共的vue实例中; 30 event.$emit('a-c',this.a); 31 } 32 }, 33 } 34 var B = { 35 data(){ 36 return { 37 b:'我是B组件数据【宝塔镇河妖】' 38 } 39 }, 40 template:'<div><span>B组件数据->{{b}}</span><button class="btn btn-success" @click="send">将数据传递给C组件</button></div>', 41 methods: { 42 send(){ 43 //$emit('事件名称',数据); 44 event.$emit('b-c',this.b); 45 46 } 47 }, 48 } 49 var C = { 50 data() { 51 return { 52 a:'', 53 b:'' 54 } 55 }, 56 template:'<div><h3>我是C组件</h3><p>接收到的A组件数据为：{{a}}</p><p>接收到的B组件数据为：{{b}}</p></div>', 57 mounted() { 58 // $ on ('事件名称',回调函数fn(a)) 59 event.$on ('a-c',(a)=>{//接收a-c 的事件 数据 60 this.a = a ; 61 }); 62 event.$on ('b-c',(b)=>{//接收b-c 的事件 数据 63 this.b = b ; 64 }); 65 }, 66 } 67 new Vue({ 68 el:'#app', 69 components:{ 70 'dom-a':A, 71 'dom-b':B, 72 'dom-c':C, 73 } 74 }) 75 </script> 76 </body> 77 </html>