Vue非父子组件之间的通信

       上一篇文章讲了Vue父子组件之间的通信，这里就介绍一下非父子组件之间是如何通信的。

       非父子组件的通信一般有两种方法，一种是通过eventHub，也就是创建一个空的vue对象作为组件间通信的介质；另一种则是通过vuex状态管理。这里介绍的是第一种方法。

 

先贴上代码：

 1     <div id="app">
 2         <foo></foo>
 3         <bar></bar>
 4     </div>
 5        
 6     <template id="foo">
 7         <div>
 8             <p>the count of d is {{fooCount}}</p>
 9             <button @click="addBar" >foo</button>
10         </div>
11     </template>
12 
13     <template id="bar">
14         <div>
15             <p>the count of d is {{barCount}}</p>
16         </div>
17     </template>
18 
19     <script>
20 
21         // foo组件
22         var foo={
23             template: '#foo',
24     　　　　 data(){
25                 return{
26                     fooCount:0
27                 }
28             },
29             methods:{
30                 addBar(){
31                     this.fooCount++;
32                     eventHub.$emit('addBar',this.fooCount);
33                 }
34             }
35     　　};
36 
37         // bar组件
38     　　var bar={
39            template: '#bar', 
40     　　　　data(){
41                 return{
42                     barCount:0
43                 }
44             },
45             created(){
46                 eventHub.$on('addBar',(arg)=>{
47                     this.barCount=arg;
48                 })
49             }
50         }
51 
52         // eventHub
53         var eventHub = new Vue();
54 
55     　　new Vue({
56     　　　　el:"#app",
57     　　　　components:{
58     　　　　　　'foo':foo,
59                'bar':bar 
60     　　　　}
61     　　});
62 
63     </script>

整个原理是比较简单的，总结一下要点：

1.foo组件是通过$emit(name,val)方法将信息发送出去，name表示发送信息的名字，val表示发送的内容

2.然后bar组件里通过$on(name,callback)里获取到foo组件发送的内容，name表示foo组件发送的信息名字，callback表示一个回调函数，来执行获取信息后的一些操作

转载于:https://www.cnblogs.com/NickyLi/p/8532212.html