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)文章
關(guān)于IDEA中的.VUE文件報(bào)錯(cuò) Export declarations are not supported by cu
這篇文章主要介紹了關(guān)于IDEA中的.VUE文件報(bào)錯(cuò) Export declarations are not supported by current JavaScript version的問(wèn)題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了加速vue組件渲染之性能優(yōu)化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue Router目前最新版本是4.X，本文主要主要介紹了10分鐘快速上手VueRouter4.x教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
基于vue 開(kāi)發(fā)中出現(xiàn)警告問(wèn)題去除方法
下面小編就為大家分享一篇基于vue 開(kāi)發(fā)中出現(xiàn)警告問(wèn)題去除方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Vue-cli Eslint在vscode里代碼自動(dòng)格式化的方法
本篇文章主要介紹了Vue-cli Eslint在vscode里代碼自動(dòng)格式化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
利用Vue.js+Node.js+MongoDB實(shí)現(xiàn)一個(gè)博客系統(tǒng)（附源碼）
本文主要介紹了利用Vue.js+Node.js+MongoDB實(shí)現(xiàn)一個(gè)博客系統(tǒng)，這個(gè)博客使用Vue做前端框架，Node+express做后端，數(shù)據(jù)庫(kù)使用的是MongoDB。實(shí)現(xiàn)了用戶(hù)注冊(cè)、用戶(hù)登錄、博客管理、文章編輯、標(biāo)簽分類(lèi)等功能，需要的朋友可以參考學(xué)習(xí)。2017-04-04
vue之監(jiān)聽(tīng)頁(yè)面是否以到底部
這篇文章主要介紹了vue之監(jiān)聽(tīng)頁(yè)面是否以到底部問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在項(xiàng)目中使用自定義字體可以提升頁(yè)面的視覺(jué)效果,并確保在不同設(shè)備上的一致性,文中通過(guò)代碼示例給出了具體的操作步驟,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
Vue中路由參數(shù)與查詢(xún)參數(shù)傳遞對(duì)比解析
在Vue.js中，路由與導(dǎo)航不僅涉及頁(yè)面切換，還包括了向頁(yè)面?zhèn)鬟f參數(shù)和獲取查詢(xún)參數(shù)，這篇文章主要介紹了Vue路由參數(shù)與查詢(xún)參數(shù)傳遞,需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關(guān)于vue.js項(xiàng)目中實(shí)用的小技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11