vue之bus總線簡單使用講解
更新時間：2021年09月13日 14:40:45 作者：牛先森家的牛奶
這篇文章主要介紹了vue之bus總線簡單使用講解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
vue之bus總線的簡單使用
場景描述：
A組件中包括B，C組件，而B組件中包括D組件，這時如果D組件想要在A組件中觸發(fā)C組件的方法怎么辦呢？
當然方案是有的，用狀態(tài)管理vuex可以，用$emit傳遞也可以，但是我想試著用的是bus總線的方式；
如下：
D組件中觸發(fā)bus的emit ，然后在A組件中用bus總線的on來觸發(fā)方法；
D組件中
dataLoad(){
console.log('加載完觸發(fā)事件');
this.$bus.$emit('itemDataLoad')
// this.$bus.$emit('事件名稱', 參數(shù)) // 第二個可以為參數(shù)
},
A組件中
mounted() {
// 監(jiān)聽item中數(shù)據(jù)加載完
this.$bus.$on('itemDataLoad', () => {
console.log('數(shù)據(jù)加載完');
})
// this.$bus.$on('事件名稱', 回調(diào)函數(shù)(參數(shù)))
},
當然在A組件中通過 this.$refs 的方式就可以觸發(fā)C組件中的事件等
還有一步驟是 $bus 默認是不存在的啊，打印試試this.$bus為undefined?。?/p>
別急，在main.js中加上$bus；
// bus總線 vue實例 Vue.prototype.$bus = new Vue()
當然可以在生命周期中移除bus總線；
this.$bus.$off();
記錄封裝的防抖函數(shù)
// 防抖函數(shù)
debounce: function (fun, delay) {
let timer = null
// 接收調(diào)用函數(shù)時傳入的參數(shù)的值 ...args 可多個
return function (...args) {
if (tiemr) return
timer = setTimeout(() => {
fun.apply(this, args)
}, delay);
}
}
const refresh = debounce(xxx, 500)
refresh('參數(shù)1', '參數(shù)2', '參數(shù)3')
到此這篇關于vue之bus總線簡單使用講解的文章就介紹到這了,更多相關vue之bus總線簡單使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue中每個組件都是隔離的,包括父組件和子組件,各組件之間需要數(shù)據(jù)通信,就涉及到了組件傳值,本文給大家介紹vue中組件間多種傳值方式案例,感興趣的朋友跟隨小編一起看看吧2024-03-03
關于Elementui中toggleRowSelection()方法實現(xiàn)分頁切換時記錄之前選中的狀態(tài)
這篇文章主要介紹了關于Elementui中toggleRowSelection()方法實現(xiàn)分頁切換時記錄之前選中的狀態(tài),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式
這篇文章主要介紹了vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式，主要有表格內(nèi)部顯示和編輯切換，通過彈出另外一個表格編輯和直接通過樣式控制三種方式，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了vue 二維碼長按保存和復制內(nèi)容操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue無法讀取HTMLCollection列表的length問題解決
這篇文章主要介紹了Vue無法讀取HTMLCollection列表的length問題解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Nuxt.js 靜態(tài)資源和打包的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了詳解Vue中watch對象內(nèi)屬性的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
最近在學習Vue,感覺methods還是有必有總結一下的,下面這篇文章主要給大家介紹了關于3分鐘迅速學會Vue中methods方法使用技巧的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章教大家如何分分鐘玩轉Vue.js組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了vue部署到域名二級目錄刷新404的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09