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

早期vue1.0組件之間的這通信傳遞數(shù)據(jù)的方法，vue官網(wǎng)給出了兩上方法 $dispatch 和 $broadcast。

但vue2.0之后就棄用 這兩個方法，以下原因是vue官網(wǎng)給出來的

官方文檔

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

vue2.0中可以使用 $emit, $on, $off 分別來分發(fā)、監(jiān)聽、取消監(jiān)聽事件。官方的給出的最簡單的升級建議是使用集中的事件處理器,而且也明確說明了 一個空的vue實例就可以做到,因為Vue 實例實現(xiàn)了一個事件分發(fā)接口.

請直接看代碼,在初始化的時候，在全局App.vue文件中給data添加一個 名字為eventhub 的空vue對象：

new Vue({
 el: '#app',
 router,
 render: h => h(App),
 data: {
  eventHub: new Vue()
 }
})

這樣我們就可以在任何組件都可以調(diào)用事件發(fā)射接收的方法了.那么在組件是如何發(fā)射與接收的呢？請看正面代碼 ：

某一個組件內(nèi)調(diào)用事件觸發(fā)

//通過this.$root.eventHub獲取此對象
//調(diào)用$emit 方法
this.$root.eventHub.$emit('你的事件名字', 你的需要傳送的數(shù)據(jù))

以上就是一個組件發(fā)射了一個事件 ，可以理解成我發(fā)送了一個廣播，如果其它組件有需要我的廣播，那么請調(diào)整到我的頻道，這個頻道就是你的事件名字，而廣播的內(nèi)容就是你傳送的數(shù)據(jù)，那么問題了，其它組件是用什么方法來接收呢？請看代碼

this.$root.eventHub.$on('你的事件名字', (傳送的數(shù)據(jù))=>{
  handle(yourData)
} )

需要收聽廣播的組件可以通過我們?nèi)侄x的eventHub.$on來接收，接收頻道就是廣播的事件名字，回調(diào)里面有數(shù)就是廣播內(nèi)容。

3.更加簡潔的寫好

對js有一定的了解，可能知道js有一個prototype的東西，這個主要的給js對象增加額外的屬性。

比如 聲明一個對象

var person=function(){
  this.name="小明";
}

然后我們擴(kuò)展一下這個對象,比如增加一個講話的方法,這時prototype這個好用的東西就派上用場了

person.prototype.say=function(){
  alert(this.name);
}

這樣就擴(kuò)展了原來的函數(shù)對象了

調(diào)用的時候直接

 var a=new person();

person.say();就會彈出小明來了。這么做的好處是不會額外產(chǎn)生內(nèi)存，所有實例化后的對象都會從原型上繼承這個方法。

Vue其實就是js一個類庫，當(dāng)然也可以用prototype這個神奇的東西來拓展自定義的屬性了，看招：

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

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

這樣我們在組件內(nèi)部 就可以直接調(diào)用$eventHub

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

發(fā)布者

//通過this.$root.eventHub獲取此對象
//調(diào)用$emit 方法
this.$eventHub.$emit('你的事件名字', 你的需要傳送的數(shù)據(jù))

接收者

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

4.關(guān)閉廣播

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論