在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>

最後這可以實現兄弟元件通訊了。