Vue全局事件總線和訂閱與發(fā)布使用案例分析講解
更新時(shí)間：2022年08月18日 09:08:27 作者：小余努力搬磚
在?vue?里我們可以通過全局事件總線來實(shí)現(xiàn)任意組件之間通信，它的原理是給?Vue?的原型對(duì)象上面添加一個(gè)屬性。這樣的話我所有組件的都可以訪問到這個(gè)屬性，然后可以通過這個(gè)屬性來訪問其他組件給這個(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ā)布無視即可
下面代碼所演示的是，小明組件給小紅組件姓名“小明”，小紅組件給小明組件“年齡”，主要通過自定義事件，其中小明組件自定義“getName”,需要傳遞給小紅組件，小紅組件就需要“getName”來接收，也可以銷毀傳遞
發(fā)送代碼如下
this.$bus.$emit('getName',this.name)//this.name是所要傳遞的值，接收代碼如下
this.$bus.$on('getName',(name)=>{
console.log( '小紅得到的名字',name);
})銷毀代碼如下
需要一個(gè)點(diǎn)擊事件來觸發(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。
打開終端輸入命令：npm i pubsub-js
組件使用案例
案例分析
通過訂閱與發(fā)布的方式，小明組件給小紅組件姓名，小紅組件給小明組件年齡
第一步我們需要引入: import pubsub from 'pubsub-js'
第二步通過在小明組件發(fā)布
pubsub.publish('usname',this.name) //usname:發(fā)布消息的名稱，第二個(gè)參數(shù)：為發(fā)布內(nèi)容第三步在小紅組件訂閱
this.del=pubsub.subscribe('usname',(q,msg)=>{
console.log('小紅得到小明',q,msg)
})第四步想要取消訂閱，自定義事件，綁定銷毀，通過第三步的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+vite使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo)的方法
這篇文章主要介紹了vue3+vite使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo)的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
Vue ElementUI之Form表單驗(yàn)證遇到的問題
這篇文章主要介紹了Vue ElementUI之Form表單驗(yàn)證遇到的問題,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了vue返回首頁后如何清空路由問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
記錄一個(gè)Vue3簡易微信右滑刪除邏輯的思路實(shí)現(xiàn)
本文主要介紹了記錄一個(gè)Vue3簡易微信右滑邏輯的思路實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue3路由配置createRouter、createWebHistory、useRouter和useRoute詳解
Vue3和Vue2基本差不多,只不過需要將createRouter、createWebHistory從vue-router中引入,再進(jìn)行使用,下面這篇文章主要給大家介紹了關(guān)于Vue3路由配置createRouter、createWebHistory、useRouter和useRoute的相關(guān)資料,需要的朋友可以參考下2023-02-02
一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn)
這篇文章主要介紹了一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn)，本文介紹在vue3的setup中使用composition?API獲取元素節(jié)點(diǎn)的幾種方法，需要的朋友可以參考一下2022-07-07
這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在本篇文章里小編給大家整理的是關(guān)于Vue開發(fā)中遇到的跨域問題及解決方法，需要的朋友們可以學(xué)習(xí)下。2020-02-02
這篇文章主要給大家介紹了關(guān)于Vue表格組件Vxe-table使用技巧的相關(guān)資料,文中還介紹了VXEtable展示指定行所遇到得問題,對(duì)大家學(xué)習(xí)或者使用Vxe-table具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09