傑森前端

event解決了組建之間各種層級關係的通信問題

主要概念就是在Vue的原型上面添加一個$bus變量是可以使用Vue原型上的方法$emit與$on的實例，

所以可以使用new Vue弄出新的Vue實例，或是Vue.extend組件實例，或是在beforeCreate中把自己實例弄到原型上。

定義

# main.js
import Vue from 'vue'
import App from './App.vue'
//寫法一 添加一個新的Vue實例
Vue.prototype.$bus = new Vue()
//寫法二 添加一個新的組件實例
const Bus = Vue.extend()
Vue.proptotype.$bus = new Bus
new Vue({
	el:'#app',
	render:h=>h(App),
	//寫法三
	beforeCreate(){
		Vue.prototype.$bus = this //添加當前的實例
	}
})

使用

在任何組件下都可以使用

this.$bus.$on() //監聽事件
this.$bus.$emit() //觸發監聽的事件並且傳值

注意

通常在組建銷毀的時候記得要消除$bus上的當前組件上的監聽

beforeDestroy(){
	this.$bus.$off(name)
}

若是Ａ組件想接收數據，則在Ａ組件中給$bus綁定事件，事件的回調使用Ａ組建本身的函式this就會正確不然就是使用箭頭函示就可以直接定義在$on上面，不然this會是綁定的實例對象。