Vue全局事件總線和訂閱與發(fā)布使用案例分析講解
更新時(shí)間：2022年08月18日 09:08:27 作者：小余努力搬磚
在?vue?里我們可以通過(guò)全局事件總線來(lái)實(shí)現(xiàn)任意組件之間通信，它的原理是給?Vue?的原型對(duì)象上面添加一個(gè)屬性。這樣的話我所有組件的都可以訪問(wèn)到這個(gè)屬性，然后可以通過(guò)這個(gè)屬性來(lái)訪問(wèn)其他組件給這個(gè)屬性上面綁定的一些方法，從而去傳遞數(shù)據(jù)
一、全局事件總線
作用
一種組件間通信的方式 適用于任意組件間通信。
安裝
安裝全局事件總線:在入口文件main.js中，給VM添加$bus，任意組件都可以在原型中調(diào)用。
new Vue({
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this
}
}).$mount('#app')組件使用案例
案例分析
創(chuàng)建兩個(gè)子組件，如下組件，其中注釋內(nèi)容是演示訂閱與發(fā)布無(wú)視即可
下面代碼所演示的是，小明組件給小紅組件姓名“小明”，小紅組件給小明組件“年齡”，主要通過(guò)自定義事件，其中小明組件自定義“getName”,需要傳遞給小紅組件，小紅組件就需要“getName”來(lái)接收，也可以銷毀傳遞
發(fā)送代碼如下
this.$bus.$emit('getName',this.name)//this.name是所要傳遞的值，接收代碼如下
this.$bus.$on('getName',(name)=>{
console.log( '小紅得到的名字',name);
})銷毀代碼如下
需要一個(gè)點(diǎn)擊事件來(lái)觸發(fā)
this.$bus.$off('getName')組件一（小明）
<template>
<div>
姓名：{{name}}年齡：{{age}}<button @click="sendMsg">給小紅組件傳姓名</button> <button @click="del">銷毀傳遞</button>
</div>
</template>
<script>
// import pubsub from 'pubsub-js'
export default {
name: 'XiaoMing',
data(){
return{
name:'小明',
age:20
}
},
methods:{
sendMsg(){
// pubsub.publish('usname',this.name)
this.$bus.$emit('getName',this.name)
},
del(){
this.$bus.$off('getName')
console.log('已銷毀');
}
},
mounted(){
// pubsub.subscribe('age',(e,page)=>{
// console.log('小明得到小紅',e,page);
// })
this.$bus.$on('getAge',(age)=>{
console.log('小明得到的年齡',age);
})
}
}
</script>
<style>
</style>組件二（小紅）
<template>
<div>
姓名：{{name}}年齡：{{age}} <button @click="sendAge">給小明組件傳年齡</button><button >取消訂閱</button>
</div>
</template>
<script>
// import pubsub from 'pubsub-js'
export default {
name:'XiaoHong',
data(){
return{
name:'小紅',
age:18
}
},
methods:{
sendAge(){
// pubsub.publish('age',this.age)
this.$bus.$emit('getAge',this.age)
},
// noRead(){
// pubsub.unsubscribe(this.del)
// }
},
mounted(){
// this.del=pubsub.subscribe('usname',(q,msg)=>{
// console.log('小紅得到小明',q,msg)
// }),
this.$bus.$on('getName',(name)=>{
console.log( '小紅得到的名字',name);
})
},
}
</script>
<style>
</style>效果展示
二、訂閱與發(fā)布
安裝
一種組件間通信的方式，適用于任意組件間通信，如今有很多消息訂閱與發(fā)布的包，在這里只介紹一種，pubsub-js。
打開(kāi)終端輸入命令：npm i pubsub-js
組件使用案例
案例分析
通過(guò)訂閱與發(fā)布的方式，小明組件給小紅組件姓名，小紅組件給小明組件年齡
第一步我們需要引入: import pubsub from 'pubsub-js'
第二步通過(guò)在小明組件發(fā)布
pubsub.publish('usname',this.name) //usname:發(fā)布消息的名稱，第二個(gè)參數(shù)：為發(fā)布內(nèi)容第三步在小紅組件訂閱
this.del=pubsub.subscribe('usname',(q,msg)=>{
console.log('小紅得到小明',q,msg)
})第四步想要取消訂閱，自定義事件，綁定銷毀，通過(guò)第三步的this.del
pubsub.unsubscribe(this.del)
組件一（小明）
<template>
<div>
姓名：{{name}}年齡：{{age}}<button @click="sendMsg">給小紅組件傳姓名</button> <button >銷毀傳遞</button>
</div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
name: 'XiaoMing',
data(){
return{
name:'小明',
age:20
}
},
methods:{
sendMsg(){
pubsub.publish('usname',this.name)
// this.$bus.$emit('getName',this.name)
},
// del(){
// this.$bus.$off('getName')
// console.log('已銷毀');
// }
},
mounted(){
pubsub.subscribe('age',(e,page)=>{
console.log('小明得到小紅',e,page);
})
// this.$bus.$on('getAge',(age)=>{
// console.log('小明得到的年齡',age);
// })
}
}
</script>
<style>
</style>組件二（小紅）
<template>
<div>
姓名：{{name}}年齡：{{age}} <button @click="sendAge">給小明組件傳年齡</button><button @click="noRead">取消訂閱</button>
</div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
name:'XiaoHong',
data(){
return{
name:'小紅',
age:18
}
},
methods:{
sendAge(){
pubsub.publish('age',this.age)
// this.$bus.$emit('getAge',this.age)
},
noRead(){
pubsub.unsubscribe(this.del)
}
},
mounted(){
this.del=pubsub.subscribe('usname',(q,msg)=>{
console.log('小紅得到小明',q,msg)
})
// this.$bus.$on('getName',(name)=>{
// console.log( '小紅得到的名字',name);
// })
},
}
</script>
<style>
</style>效果展示
到此這篇關(guān)于Vue全局事件總線和訂閱與發(fā)布使用案例分析講解的文章就介紹到這了,更多相關(guān)Vue全局事件總線內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中數(shù)據(jù)響應(yīng)式原理與高效數(shù)據(jù)操作全解析
這篇文章主要為大家詳細(xì)介紹了Vue3中數(shù)據(jù)響應(yīng)式原理與高效數(shù)據(jù)操作的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
vue element upload實(shí)現(xiàn)圖片本地預(yù)覽
這篇文章主要為大家詳細(xì)介紹了vue element upload實(shí)現(xiàn)圖片本地預(yù)覽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
vue打包部署到springboot并通過(guò)tomcat運(yùn)行的操作方法
這篇文章主要介紹了vue打包部署到springboot并通過(guò)tomcat運(yùn)行的操作方法,本文通過(guò)實(shí)例圖文并茂的形式給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)之scrollIntoView()方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)之scrollIntoView()方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答
這篇文章主要介紹了web面試中常問(wèn)問(wèn)題，MVC與MVVM區(qū)別以及Vue為什么不完全遵守MVVM的難點(diǎn)解答，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
在Vue3中使用vue-qrcode庫(kù)實(shí)現(xiàn)二維碼生成的方法
在Vue3中實(shí)現(xiàn)二維碼生成需要使用第三方庫(kù)來(lái)處理生成二維碼的邏輯,常用的庫(kù)有 qrcode和 vue-qrcode,這篇文章主要介紹了在Vue3中使用vue-qrcode庫(kù)實(shí)現(xiàn)二維碼生成,需要的朋友可以參考下2023-12-12
Vant Uploader實(shí)現(xiàn)上傳一張或多張圖片組件
這篇文章主要為大家詳細(xì)介紹了Vant Uploader實(shí)現(xiàn)上傳一張或多張圖片組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
在Vue開(kāi)發(fā)中使用:style綁定樣式是常見(jiàn)需求,應(yīng)注意:class與:style的配合使用,錯(cuò)誤的使用可能導(dǎo)致樣式不生效,正確的方法是使用數(shù)組綁定多個(gè)樣式,這些技巧有助于提高開(kāi)發(fā)效率和保持代碼整潔,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue?props使用typescript自定義類型的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue?props使用typescript自定義類型的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-01-01
本文通過(guò)實(shí)例代碼給大家介紹了vue 中swiper的使用，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05