Vue全局事件總線$bus安裝與應(yīng)用小結(jié)
更新時間：2022年09月09日 09:12:47 作者：codnan
這篇文章主要介紹了Vue全局事件總線$bus安裝與應(yīng)用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1.什么是全局事件總線
一種組件間通信的方式，適用于任意組件間通信。
2.安裝
在main.js里安裝全局事件總線：
new Vue({
......
beforeCreate(){
//安裝全局事件總線，$bus就是當前應(yīng)用的vm
Vue.prototype.$bus=this
}
......
})3.使用
使用全局事件總線：
1.接收數(shù)據(jù)：A組件想接收數(shù)據(jù)，則要在A組件中給$bus綁定自定義事件，事件的回調(diào)留在A組件自身。
methods(){
//事件的回調(diào)，用來接收數(shù)據(jù)
demo(data){
……
}
}
……
mounted(){
//必須要在mounted中綁定自定義事件,xxx為自定義事件的名稱，this.demo為事件回調(diào)
this.$bus.$on(‘xxx',this.demo)
}2.提供數(shù)據(jù)：B組件要給A組件傳遞數(shù)據(jù)，就要觸發(fā)A組件中的自定義事件并攜帶要傳遞的數(shù)據(jù)
this.$bus.$emit(‘xxx',數(shù)據(jù))
4.銷毀
最好在beforeDestory的狗子函數(shù)中，用$off去解綁當前組件所用到的事件
//在A組件中，組件銷毀之前解綁事件
beforeDestory(){
this.$bus.$off('xxx')
}完整版示例：
到此這篇關(guān)于Vue全局事件總線$bus安裝與應(yīng)用的文章就介紹到這了,更多相關(guān)Vue全局事件總線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
驗證碼功能在我們的身邊用處極廣，今天小編給大家分享基于vue實現(xiàn)隨機驗證碼功能,感興趣的朋友跟隨小編一起看看吧2019-12-12
這篇文章主要介紹了vue實現(xiàn)公共方法抽離，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
el-elementUI使用el-date-picker選擇年月
本文主要介紹了el-elementUI使用el-date-picker選擇年月,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-02-02
詳解Vue3中shallowRef和shallowReactive的使用
這篇文章主要為大家介紹了Vue3中shallowRef和shallowReactive函數(shù)的使用方法，文中的示例代碼講解詳細，對我們學習Vue有一定的幫助，需要的可以參考一下2022-07-07
本文介紹了如何以Vue引入antDesignUI,主要包括下載安裝、配置和引入組件等步驟,通過本文,讀者可以快速了解antDesignUI在Vue中的應(yīng)用,感興趣的可以了解一下2023-08-08
ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue 中使用vue2-highcharts實現(xiàn)top功能的示例
下面小編就為大家分享一篇Vue 中使用vue2-highcharts實現(xiàn)top功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
基于Vue實現(xiàn)關(guān)鍵詞實時搜索高亮顯示關(guān)鍵詞
這篇文章主要介紹了基于Vue實現(xiàn)關(guān)鍵詞實時搜索高亮顯示關(guān)鍵詞，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue中使用axios固定url請求前綴的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue中利用iscroll.js解決pc端滾動問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02