【11.全局事件總線(Global Event Bus)】
全局事件總線：實(shí)現(xiàn)任意組件間通信
【原理圖】
-
結(jié)合上圖，假若C組件想要傳遞數(shù)據(jù)給A組件，那么，就通過全局事件總線在A組件中綁定
【$on】一個(gè)自定義事件demo，并界定一個(gè)參數(shù)來接收傳遞的數(shù)據(jù)，同樣在C組件中，就需要通過全局事件總線對自定義事件demo進(jìn)行觸發(fā)【$emit】，并傳遞參數(shù),這樣就實(shí)現(xiàn)了任意組件之間的通信。 -
簡單理解，全局事件總線其實(shí)就是一個(gè)中間介質(zhì)，組件間的相互通信借助于這個(gè)中間介質(zhì)，通過這個(gè)中間轉(zhuǎn)換介質(zhì)，從而完成數(shù)據(jù)的傳遞與接收，實(shí)現(xiàn)組件間的相互通信。
-
全局事件總線是一個(gè)獨(dú)立存在的部分，要想實(shí)現(xiàn)組件間的相互通信，又是自定義事件，那就要滿足兩個(gè)條件:
【1】. 所有的組件都能訪問到全局事件總線
【X總線】【2】. 可以調(diào)用
$on【綁定】，$off【解綁】，$emit【觸發(fā)事件】
全局事件總線應(yīng)該安裝在哪里呢？
- 安裝全局事件總線前需要考慮：如果要所有組件對象【vm,vc】都能夠獲取到事件總線
- 從下圖可以看出，當(dāng)組件實(shí)例化對象vc獲取數(shù)據(jù)時(shí)，會(huì)首先找到組件原型對象，如果該組件實(shí)例對象中沒有此數(shù)據(jù)，那么就找到Vue的原型對象，Vue的原型對象只有一個(gè)，所有組件都能夠獲取到它的數(shù)據(jù)，所以事件總線要安裝到Vue的原型對象上。
結(jié)合組件的內(nèi)置關(guān)系：
VueComponent.prototype.__proto__ === Vue.prototype【Vue的原型對象】
這個(gè)關(guān)系在作用就在于可以讓 組件實(shí)例對象（vc，vm） 可以訪問到Vue原型對象【Vue.prototype】上的屬性和方法
-
回顧知識(shí)：
關(guān)于VueComponent：1.A、B、C子組件本質(zhì)上是一個(gè)名為VueComponent的構(gòu)造函數(shù)，且不是程序員定義的，是調(diào)用Vue.extend()生成的
2.只需要寫
<A/>或<A></A>，Vue解析時(shí)會(huì)幫我創(chuàng)建A組件的實(shí)例對象，3.每次調(diào)用Vue.extend，返回的都是一個(gè)全新的VueComponent
-
1. 由于是在入口文件main.js中引入的Vue，所以事件總線需要配置到main.js當(dāng)中
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//關(guān)閉Vue的生產(chǎn)提示
Vue.config.productionTip = false
//創(chuàng)建vm
new Vue({
el:'#app',
render: h => h(App),
// 生命周期鉤子beforeCreate中模板未解析，且this是vm
beforeCreate() {
Vue.prototype.$bus = this //安裝全局事件總線$bus
}
})
-
為什么要在Vue實(shí)例對象中采用生命周期鉤子beforeCreate安裝事件總線？
- 由生命周期beforeCreate此時(shí)只是完成了初始化工作，創(chuàng)建了Vue實(shí)例對象，但是模板并沒有解析，數(shù)據(jù)代理并沒有運(yùn)轉(zhuǎn)。
- 2. 接下來，我們就要對想要接收到數(shù)據(jù)的組件進(jìn)行自定義事件的綁定，簡單來說就是，誰【比如：A】要接收數(shù)據(jù)，自定義事件就綁定在誰【比如：A】身上 【$on()里面要是用箭頭函數(shù)】
- 綁定全局事件總線
此處若用的是箭頭函數(shù)，不是普通函數(shù)，那么函數(shù)里的this指向【vc】不會(huì)有問題。
mounted(){
// 綁定自定義事件
//此處若用的是普通函數(shù)，不是箭頭函數(shù)，那么函數(shù)里的this指向會(huì)有問題。
this.$bus.$on('自定義事件名', (接收參數(shù))=>{
console.log('我是TestB組件，收到了數(shù)據(jù)', 接收參數(shù));
console.log('School組件里的this', this); //vc
})
}
此處若用的是普通函數(shù)，不是箭頭函數(shù)，那么函數(shù)里的this指向【vm】會(huì)有問題。
mounted(){
// 綁定自定義事件
//此處若用的是普通函數(shù)，不是箭頭函數(shù)，那么函數(shù)里的this指向會(huì)有問題。
this.$bus.$on('自定義事件名',function (接收參數(shù)){
console.log('我是TestB組件，收到了數(shù)據(jù)', 接收參數(shù));
console.log('School組件里的this', this); //vm
console.log('this.$bus', this.$bus); //vm
})
}
- 3. 最后一步，全局事件總線的觸發(fā)，事件的觸發(fā)是在發(fā)送數(shù)據(jù)的組件中完成的，簡單來說，誰【比如：B】是數(shù)據(jù)的發(fā)送者，誰【比如：B】就來觸發(fā)事件
- 觸發(fā)全局事件總線
methods:{
// 觸發(fā)事件,事件名不能重復(fù)
觸發(fā)事件方法名(){
this.$bus.$emit('自定義事件名', 傳遞參數(shù));
}
},
- 4. 在得到數(shù)據(jù)之后，解綁事件，提高性能，在beforedestroy生命周期鉤子中，用
$off解綁當(dāng)前組件所用到的數(shù)據(jù) - 解綁自定義事件
// 銷毀對應(yīng)自定義事件
beforeDestroy(){
this.$bus.$off('自定義事件名')
}
完整代碼：
School.vue組件
<template>
<div class="school">
<h1>School組件</h1>
<!-- 給子組件的實(shí)例對象VC綁定了事件getName，該事件觸發(fā)會(huì)調(diào)用函數(shù)getStudentName -->
<h2>兄弟組件Student傳過來的name：{{ StudentName }}</h2>
<h2>兄弟組件Student傳過來的age：{{ StudentAge }}</h2>
</div>
</template>
<script>
export default {
name: 'School',
data() {
return {
StudentName: '',
StudentAge: '',
};
},
mounted() {
// 綁定自定義事件haha
this.$bus.$on('haha', (...params) => {
console.log('School組件里的', this);
this.StudentName = params[0];
this.StudentAge = params[1];
console.log('我是School組件，收到了數(shù)據(jù)', params);
});
},
// 銷毀對應(yīng)自定義事件
beforeDestroy() {
// 解綁自定義事件
this.$bus.$off('haha')
},
};
</script>
<style scoped>
.school {
background-color: rgb(73, 192, 150);
}
</style>
...params:可以以數(shù)組的形式接收多個(gè)參數(shù)。
Student.vue組件
<template>
<div class="student">
<h1>Student組件信息</h1>
<h2>學(xué)生姓名：{{ name }}</h2>
<h2>學(xué)生性別：{{ sex }}</h2>
<h2>學(xué)生年齡：{{ age }}</h2>
<h2>學(xué)生成績：{{ score }}</h2>
<button class="haha" @click="sendStudentlName">
<h2>點(diǎn)擊此處給兄弟組件School傳值</h2></button>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {
name: '何大春',
sex: '男',
age: '22',
score: '88',
};
},
methods: {
sendStudentlName(){
console.log("Student組件里的",this.name);
// 傳給School組件兩個(gè)參數(shù)
this.$bus.$emit('haha',this.name,this.age)
}
},
};
</script>
<style lang="less" scoped>
.student {
background-color: tomato;
padding: 50px;
margin-top: 50px;
margin-left: 50px;
width: 300px;
height: 350px;
}
.h2 {
padding: 5px;
margin: 5px 5px 5px 5px;
}
.haha {
background-color: rgb(211, 233, 130);
}
</style>
結(jié)果展示：
補(bǔ)充知識(shí)點(diǎn)：
問題1：“全局事件總線”需要哪些特點(diǎn)？
- 1）被所有組件(vc、vm)能夠看得見
- 2）能夠調(diào)用
$on、$emit、$off
問題2：“Vue原型對象----Vue.prototype上面的所有屬性和方法是給誰用的？
- 是給所有的vm和vc使用的
問題3：為什么定義“全局事件總線”要放在main.js文件中？
- 因?yàn)槟睦镆隫ue，哪里才會(huì)去定義“全局事件總線”
問題4：“為什么定義“全局事件總線”要放在beforeCreate的鉤子函數(shù)中？
1）beforeCreate鉤子函數(shù)里this指代new出來的vm
2）在beforeCreate鉤子函數(shù)里模板還沒解析，數(shù)據(jù)監(jiān)測和數(shù)據(jù)代理也還沒完成呢。也就是說借助這個(gè)beforeCreate鉤子函數(shù)你把想做的事兒做好了，原型上該放的放好了，隨后模板開始解析，等組件執(zhí)行的時(shí)候你該放的都放好了，后續(xù)才都不會(huì)產(chǎn)生影響。
問題5：如何避免在使用“全局事件總線”時(shí)自定義函數(shù)名重名使用問題？比如組件1使用自定義函數(shù)名叫demo，那組件2不全文搜索也使用了自定義函數(shù)名也叫demo，這就混了
- 真實(shí)項(xiàng)目中src目錄下創(chuàng)建一個(gè)config文件夾，里面創(chuàng)建個(gè)constants常量文件，里面用來定義要使用的自定義函數(shù)名，方便別人查看并避免重名問題。
問題6：“為什么要在組件銷毀之前，把“全局事件總線”中定義的自定義事件函數(shù)解綁？那“知識(shí)點(diǎn)組件自定義事件”中咋沒說解綁的事兒呢？
- “組件自定義事件”中，組件銷毀了== vc銷毀了，vc銷毀了自定義事件也就銷毀了，而“全局事件總線”中定義的自定義事件是一直存在的，哪怕使用組件銷毀了，但是Vue實(shí)例定義的“全局事件總線”中還是會(huì)存在自定義事件，所以需要在組件銷毀之前進(jìn)行解綁。
注意7：銷毀“全局事件總線”中定義的自定義事件請放在beforeDestroy()鉤子中
注意8：子組件中使用“全局事件總線”時(shí)this.$bus.$on()中回調(diào)配置要使用箭頭函數(shù)，不要使用普通函數(shù)，普通函數(shù)中this指代vue實(shí)例，而箭頭函數(shù)中this才指代vc，因?yàn)樽罱K要在school組件上接收平行組件發(fā)過來的消息，所以要使用vc，而不是要使用vue實(shí)例，因?yàn)関ue實(shí)例不是我們最終要的。
mounted(){
// 綁定自定義事件
this.$bus.$on('自定義事件名', (接收參數(shù))=>{
console.log('我是TestB組件，收到了數(shù)據(jù)', 接收參數(shù));
})
},
mounted() {
// 綁定自定義事件haha
this.$bus.$on('haha', (...params) => {
console.log('School組件里的', this); //this = vc
this.StudentName = params[0];
this.StudentAge = params[1];
console.log('我是School組件，收到了數(shù)據(jù)', params);
});
},
總結(jié)：
全局事件總線實(shí)現(xiàn)了任意組件間的通信，有效簡化了開發(fā)過程中一些數(shù)據(jù)傳遞的操作，同時(shí)也提高了程序的性能，但是值得注意的是，全局事件總線之所以叫全局，是因?yàn)槿魏谓M件都可以訪問，這就導(dǎo)致如果大量組件都綁定了全局事件總線，難免會(huì)造成代碼混亂，且自定義事件名可能發(fā)生重復(fù)的問題，所以在開發(fā)中，使用全局事件總線時(shí)要根據(jù)實(shí)際業(yè)務(wù)情況進(jìn)行選擇。
-
全局事件總線：一種組件間通信的方式，適用于任意組件間通信。
-
安裝全局事件總線：
new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安裝全局事件總線，$bus就是當(dāng)前應(yīng)用的vm }, ...... }) -
使用事件總線：
-
定義自定義事件+接收數(shù)據(jù)：A組件想接收數(shù)據(jù)，則在A組件中給$bus綁定自定義事件，事件的回調(diào)留在A組件自身。
methods(){ demo(data){......} } ...... mounted() { this.$bus.$on('xxxx',this.demo) } -
觸發(fā)事件+提供數(shù)據(jù)：
this.$bus.$emit('xxxx',數(shù)據(jù))文章來源：http://www.zghlxwxcb.cn/news/detail-495195.html
-
-
最好在beforeDestroy鉤子中，用$off去解綁當(dāng)前組件所用到的事件。文章來源地址http://www.zghlxwxcb.cn/news/detail-495195.html
到了這里，關(guān)于前端vue入門(純代碼)11的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
