Vue2.0 事件的廣播與接收(觀察者模式)

這篇文章主要介紹了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();

##person.say( );就會彈出小明來了。這麼做的好處是不會額外產生內存，所有實例化後的物件都會從原型上繼承這個方法。

Vue其實就是js一個類別函式庫，當然也可以用prototype這個神奇的東西來拓展自訂的屬性了，看招：

在初始化Vue. app 之前加上這樣一句：

Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue()

#這樣我們在元件內部就可以直接呼叫$eventHub

以下是對上面的方法重新改造:

發布者

//通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$eventHub.$emit('你的事件名字', 你的需要传送的数据)

接收者

 this.$eventHub.$on('你的事件名字', (传送)=>{
    handle(yourData).
  } )

#4.關閉廣播

關閉廣播我們主要透過$off(你的事件名字)來取消收聽就可以啦!

#上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

vue渲染時閃爍{{}}的問題及解決方法

##淺談js獲取ModelAndView值的問題

vue頁面載入閃爍問題的解決方法

##

以上是Vue2.0 事件的廣播與接收(觀察者模式)的詳細內容。更多資訊請關注PHP中文網其他相關文章！