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對象：
|
1
2
3
4
5
6
7
8
|
new
Vue({
el:
'#app'
,
router,
render: h => h(App),
data: {
eventHub:
new
Vue()
}
})
|
這樣我們就可以在任何組件都可以調用事件發射接收的方法了.那么在組件是如何發射與接收的呢？請看正面代碼 ：
某一個組件內調用事件觸發
|
1
2
3
|
//通過this.$root.eventHub獲取此對象
//調用$emit 方法
this
.$root.eventHub.$emit(
'你的事件名字'
, 你的需要傳送的數據)
|
以上就是一個組件發射了一個事件 ，可以理解成我發送了一個廣播，如果其它組件有需要我的廣播，那么請調整到我的頻道，這個頻道就是你的事件名字，而廣播的內容就是你傳送的數據，那么問題了，其它組件是用什么方法來接收呢？請看代碼
|
1
2
3
|
this
.$root.eventHub.$on(
'你的事件名字'
, (傳送的數據)=>{
handle(yourData)
} )
|
需要收聽廣播的組件可以通過我們全局定義的eventHub.$on來接收，接收頻道就是廣播的事件名字，回調里面有數就是廣播內容。
3.更加簡潔的寫好
對js有一定的了解，可能知道js有一個prototype的東西，這個主要的給js對象增加額外的屬性。
比如 聲明一個對象
|
1
2
3
|
var
person=
function
(){
this
.name=
"小明"
;
}
|
然后我們擴展一下這個對象,比如增加一個講話的方法,這時prototype這個好用的東西就派上用場了
|
1
2
3
|
person.prototype.say=
function
(){
alert(
this
.name);
}
|
這樣就擴展了原來的函數對象了
調用的時候直接
|
1
|
var
a=
new
person();
|
person.say();就會彈出小明來了。這么做的好處是不會額外產生內存，所有實例化后的對象都會從原型上繼承這個方法。
Vue其實就是js一個類庫，當然也可以用prototype這個神奇的東西來拓展自定義的屬性了，看招：
在初始化Vue.app 之前 加上這樣一句：
|
1
|
Vue.prototype.$eventHub= Vue.prototype.$eventHub ||
new
Vue()
|
這樣我們在組件內部 就可以直接調用$eventHub
以下是對上面的方法重新 改造:
發布者
|
1
2
3
|
//通過this.$root.eventHub獲取此對象
//調用$emit 方法
this
.$eventHub.$emit(
'你的事件名字'
, 你的需要傳送的數據)
|
接收者
|
1
2
3
|
this
.$eventHub.$on(
'你的事件名字'
, (傳送)=>{
handle(yourData).
} )
|
4.關閉廣播
關閉廣播我們主要通過 $off(你的事件名字)來取消收聽就可以啦!