vue2.0之非父子组件通信

    在vue的1,0版本里，组件之间的通信是通过$dispatch和$broadcast来进行通信的，但是在2.0版本里面则取消上述这两个方法，并提出了新的解决办法。关于vue2.0的父子组件的通信上文也有讲过，现在要讲的是非父子组件。

    在vue官网中，官方推荐使用eventBus来进行非父子组件的通信，本文现在演示在项目中如何实现非父子组件通信。首先在父组件(App.vue)里，有两个子组件，分别是foo和bar，foo通过$emit方法把信息发送出去，而bar通过$on方法来接收到foo发送的东西，具体演示如下。

首先先新建一个bus.js，里面内容如下：

import Vue from 'vue'
export default new Vue();

在父组件中定义后这两个组件：

<template>
  <div id="app">
    <bar></bar>
    <foo></foo>
  </div>
</template>

<script>
  import Foo from './components/foo.vue'
  import Bar from './components/bar.vue'
  export default{
    name:'app',
    components:{
      'bar':Bar,
      'foo':Foo
    }
  }
</script>

相应的，foo组件是通过$emit(name,val)方法将信息发送出去，name表示发送信息的名字，val表示发送的内容，导入bus.js：

<template>
    <div>
        <p>the count of d is{{fooCount}}</p>
        <button @click="addBar" >foo</button>
    </div>
</template>
<script>
    import Bus from './bus'
    export default{
        data(){
            return{
                fooCount:0
            }
        },
        methods:{
            addBar(){
                this.fooCount++
                Bus.$emit('addBar',this.fooCount)
            }
        }
    }
</script>

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

<template>
    <div>
        <p>the count of d is{{barCount}}</p>
    </div>
</template>
<script>
import Bus from './bus'
    export default{
        data(){
            return{
                barCount:0
            }
        },
        created(){
            Bus.$on('addBar',(arg)=>{
                this.barCount=arg
            })
        }
    }
</script>

最后这可以实现兄弟组件通信了。