$emit 和 $on 进行平行组件之间的传值

效果图：

注：$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>