Vue2與Vue3兄弟組件通訊bus的區(qū)別及用法
更新時(shí)間：2021年09月24日 10:40:45 作者：SpringSir
這篇文章主要介紹了Vue2與Vue3兄弟組件通訊bus的區(qū)別及用法，有需要的朋友可以借鑒參考下，希望可以有所幫助，祝大家多多進(jìn)步早日升職加薪
vue2.x
- Vue.prototype.$bus=new Vue()
- 監(jiān)聽(tīng)： this.$bus.$on(‘方法名',(參數(shù))=>{}),它可以累加
- 觸發(fā)： this.$bus.$emit(‘方法名',實(shí)參值)
- 銷(xiāo)毀:this.$bus.$off(‘方法名')，誰(shuí)監(jiān)聽(tīng)誰(shuí)銷(xiāo)毀
- 注意: 由于監(jiān)聽(tīng)可以累加, 所以必須要有第四步銷(xiāo)毀
vue3.x
tiny-emitter插件用法
安裝插件 npm i tiny-emitter
導(dǎo)入使用
import emitter from ‘tiny-emitter/instance'
import {onMounted} from ‘vue'
setup(){
onMounted(()=>{
監(jiān)聽(tīng)： emitter.on('監(jiān)聽(tīng)的方法名',(參數(shù))=>{回調(diào)函數(shù)})
觸發(fā)： emitter.emit('監(jiān)聽(tīng)的方法名'，參數(shù))
銷(xiāo)毀： emitter.off('監(jiān)聽(tīng)的方法名'，參數(shù))
})
}
mitt插件用法
1.安裝 npm i mitt
2.導(dǎo)入使用
import mitt from ‘mitt'
監(jiān)聽(tīng)： bus.on(‘監(jiān)聽(tīng)的方法名',(參數(shù))=>{回調(diào)函數(shù)})
觸發(fā)：bus.emit(‘監(jiān)聽(tīng)的方法名'，參數(shù))
銷(xiāo)毀： bus.off(‘監(jiān)聽(tīng)的方法名'，參數(shù))
以上就是Vue2與Vue3兄弟組件通訊bus的區(qū)別及用法的詳細(xì)內(nèi)容，更多關(guān)于Vue2與Vue3兄弟組件通訊bus用法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue計(jì)算屬性computed的使用方法,結(jié)合實(shí)例形式分析了vue計(jì)算屬性computed的基本用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
這篇文章主要給大家介紹了關(guān)于如何基于Vue3封裝一個(gè)好用的Websocket的相關(guān)資料,在Vue3中我們可以將Websocket類(lèi)封裝成一個(gè)Vue插件,以便全局使用,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了詳解Vue.js自定義tipOnce指令用法實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了在Vue中實(shí)現(xiàn)添加全局store方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細(xì)過(guò)程
這篇文章主要介紹了vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細(xì)過(guò)程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
Vue獲取當(dāng)前系統(tǒng)日期(年月日)的示例代碼
發(fā)中會(huì)有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,有的是精確到分秒,在 Vue 開(kāi)發(fā)中,獲取當(dāng)前時(shí)間是一項(xiàng)常見(jiàn)的需求,本文將深入探討Vue獲取當(dāng)前系統(tǒng)日期(年月日),幫助您更好地利用當(dāng)前時(shí)間,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue如何自定義地址設(shè)置@，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue.js如何使用Socket.IO的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Vuex之Action的使用方法詳解,Action 類(lèi)似于 mutation ,不同在于Action 提交的是 mutation,而不是直接變更狀態(tài),2023-11-11
Action 可以包含任意異步操作,需要的朋友可以參考下
Vue動(dòng)態(tài)權(quán)限登錄實(shí)現(xiàn)(基于路由與角色)
很多應(yīng)用都會(huì)需要對(duì)不同的用戶進(jìn)行權(quán)限控制，本文主要介紹了Vue動(dòng)態(tài)權(quán)限登錄實(shí)現(xiàn)(基于路由與角色)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05