Vue非父子组件之间的通信

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

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

 

先贴上代码：

    <div id="app">
        <foo></foo>
        <bar></bar>
    </div>
       
    <template id="foo">
        <div>
            <p>the count of d is {{fooCount}}</p>
            <button @click="addBar" >foo</button>
        </div>
    </template>

    <template id="bar">
        <div>
            <p>the count of d is {{barCount}}</p>
        </div>
    </template>

    <script>

        // foo组件
        var foo={
            template: '#foo',
    　　　　 data(){
                return{
                    fooCount:0
                }
            },
            methods:{
                addBar(){
                    this.fooCount++;
                    eventHub.$emit('addBar',this.fooCount);
                }
            }
    　　};

        // bar组件
    　　var bar={
           template: '#bar', 
    　　　　data(){
                return{
                    barCount:0
                }
            },
            created(){
                eventHub.$on('addBar',(arg)=>{
                    this.barCount=arg;
                })
            }
        }

        // eventHub
        var eventHub = new Vue();

    　　new Vue({
    　　　　el:"#app",
    　　　　components:{
    　　　　　　'foo':foo,
               'bar':bar 
    　　　　}
    　　});

    </script>

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

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

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