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(你的事件名字)來取消收聽就可以啦!

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue2.0中觀察者模式的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!