這篇文章主要介紹了Vue2.0 事件的廣播與接收(觀察者模式)，現在分享給大家，也給大家做個參考。
1.Vue1.0 事件的廣播與接收(觀察者模式)
早期vue1.0元件之間的這通訊傳遞資料的方法，vue官網給了兩上方法$dispatch 和$broadcast。
但vue2.0之後就棄用這兩個方法，以下原因是vue官網給出的
官方文件
2.Vue2.0 事件的廣播與接收(觀察者模式)
vue2.0中可以使用$emit, $on, $off分別來分發、監聽、取消監聽事件。官方的給出的最簡單的升級建議是使用集中的事件處理器,而且也明確說明了一個空的vue實例就可以做到,因為Vue 實例實現了一個事件分發接口.
請直接看程式碼,在初始化的時候，在全域App.vue檔案中為data加上一個名字為eventhub 的空vue物件：
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
eventHub: new Vue()
}
})
這樣我們就可以在任何元件都可以呼叫事件發射接收的方法了.那麼在元件是如何發射與接收的呢？請看正面程式碼：
某一個元件內呼叫事件觸發
//通过this.$root.eventHub获取此对象 //调用$emit 方法 this.$root.eventHub.$emit('你的事件名字', 你的需要传送的数据)
以上就是一個組件發射了一個事件，可以理解成我發送了一個廣播，如果其它組件有需要我的廣播，那麼請調整到我的頻道，這個頻道就是你的事件名字，而廣播的內容就是你傳送的數據，那麼問題了，其它組件是用什麼方法來接收呢？請看代碼
this.$root.eventHub.$on('你的事件名字', (传送的数据)=>{
handle(yourData)
} )#需要收聽廣播的元件可以透過我們全域定義的eventHub.$on來接收，接收頻道就是廣播的事件名字，回檔裡面有數就是廣播內容。
3.更簡潔的寫好
對js有一定的了解，可能知道js有一個prototype的東西，這個主要的給js物件增加額外的屬性。
例如宣告一個物件
var person=function(){
this.name="小明";
}然後我們擴充這個物件,例如增加一個講話的方法,這時prototype這個好用的東西就派上用場了
person.prototype.say=function(){
alert(this.name);
}這樣就擴充了原來的函數物件了
呼叫的時候直接
var a=new person();
Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue()
//通过this.$root.eventHub获取此对象 //调用$emit 方法 this.$eventHub.$emit('你的事件名字', 你的需要传送的数据)
this.$eventHub.$on('你的事件名字', (传送)=>{
handle(yourData).
} )#4.關閉廣播
##
以上是Vue2.0 事件的廣播與接收(觀察者模式)的詳細內容。更多資訊請關注PHP中文網其他相關文章！
