vue之bus總線的簡(jiǎn)單使用解讀
vue bus總線的使用
場(chǎng)景描述
A組件中包括B，C組件，而B組件中包括D組件，這時(shí)如果D組件想要在A組件中觸發(fā)C組件的方法怎么辦呢？
當(dāng)然方案是有的，用狀態(tài)管理vuex可以，用$emit傳遞也可以，但是我想試著用的是bus總線的方式；
如下所示
D組件中觸發(fā)bus的emit ，然后在A組件中用bus總線的on來(lái)觸發(fā)方法；
D組件中
dataLoad(){
? ?console.log('加載完觸發(fā)事件');
? ?this.$bus.$emit('itemDataLoad')?
? ?// this.$bus.$emit('事件名稱', 參數(shù)) // 第二個(gè)可以為參數(shù)
},A組件中
?mounted() {
? ? // 監(jiān)聽item中數(shù)據(jù)加載完
? ? this.$bus.$on('itemDataLoad', () => {
? ? ? console.log('數(shù)據(jù)加載完');
? ? })
? ? // this.$bus.$on('事件名稱', 回調(diào)函數(shù)(參數(shù)))
? },當(dāng)然在A組件中通過 this.$refs 的方式就可以觸發(fā)C組件中的事件等
還有一步驟是 $bus 默認(rèn)是不存在的啊，打印試試this.$bus為undefined??；
別急，在main.js中加上$bus；
// bus總線 vue實(shí)例 Vue.prototype.$bus = new Vue()
當(dāng)然可以在生命周期中移除bus總線；
this.$bus.$off();
記錄封裝的防抖函數(shù)
// 防抖函數(shù)
? debounce: function (fun, delay) {
? ? let timer = null
? ? // 接收調(diào)用函數(shù)時(shí)傳入的參數(shù)的值 ...args 可多個(gè)
? ? 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')bus總線的原理解析
關(guān)于官方介紹 從 Vue 1.x 遷移 — Vue.js
在官方文檔中對(duì)bus總線的介紹是使用，但是明確指出了復(fù)雜情況推薦使用vuex實(shí)現(xiàn)非父子組件直接的傳值，bus總線應(yīng)用在簡(jiǎn)單的項(xiàng)目
1.怎么理解bus總線
bus總線就是一個(gè)中間組件,觸發(fā)事件，觸發(fā)中間組件，監(jiān)聽中間組件的變化
2.bus組件存在的條件和注冊(cè)
- 1.所有組件都可以訪問
- 2.可以使用$emit,$on,$off
在項(xiàng)目過程中要滿足這兩點(diǎn)需求
1.所有組件都可訪問
在vue的項(xiàng)目中，要所有組件都可以訪問，那么一定在vue進(jìn)行實(shí)例化之前就準(zhǔn)備好,就是下圖紅色部分
2.可以使用$emit,$on,$off
有$emit，$on，$off的一定是vue的實(shí)例對(duì)象vc,或者vueComponent的實(shí)例對(duì)象vm
掛載到哪都可以訪問？必然是原型上
vue.prototype.$bus = vue的實(shí)例對(duì)象/vueComponent的實(shí)例對(duì)象
第一種：
Vue.prototype.$bus = vueComponent的實(shí)例對(duì)象(所有的vueComponent的實(shí)例對(duì)象都是（Vue.extentd構(gòu)造的)
第二種：
在生命周期創(chuàng)建之前 Vue.prototype.$bus = vue的實(shí)例對(duì)象
第三種：
利用插件進(jìn)行掛載
安裝 - npm install vue-bus
注冊(cè)使用：
import VueBus from 'vue-bus'; Vue.use(VueBus)
3.使用
觸發(fā)事件
this.$bus.$emit('事件名', 值)監(jiān)聽事件
create() {
this.$bus.$on('事件名', (值) = > {
})
}銷毀事件
this.$bus.$off('事件名')在理解bus總線的前提，是需要理解，為什么寫在vue的原型上就可以訪問？可以自行思考一下，涉及了一些vue的原理
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2?Element?description組件列合并詳解
在使用Vue的時(shí)候經(jīng)常會(huì)涉及到表格的列合并,下面這篇文章主要給大家介紹了給大家Vue2?Element?description組件列合并的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
vue?element表格某一列內(nèi)容過多,超出省略號(hào)顯示的實(shí)現(xiàn)
這篇文章主要介紹了vue?element表格某一列內(nèi)容過多,超出省略號(hào)顯示的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了Vue首頁(yè)加載白屏原因以及10種解決方法匯總，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue.js 2.0學(xué)習(xí)教程之從基礎(chǔ)到組件詳解
這篇文章主要介紹了Vue.js 2.0從基礎(chǔ)到組件的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考價(jià)值，需要的朋友可以參考學(xué)習(xí)，下面來(lái)一起看看吧。2017-04-04
Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案
element ui官方封裝好的el-table組件,好用是挺好用的,但不可避免的是默認(rèn)的樣式,下面這篇文章主要給大家介紹了關(guān)于Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案,需要的朋友可以參考下2023-02-02
Element的穿梭框數(shù)據(jù)量大時(shí)點(diǎn)擊全選卡頓的解決方案
本文主要介紹了Element的穿梭框數(shù)據(jù)量大時(shí)點(diǎn)擊全選卡頓的解決方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue路由插件之vue-route的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹了vue router的使用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
本篇文章主要介紹了簡(jiǎn)單的 Vue SSR的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-01-01
這篇文章主要介紹了在IDEA中安裝vue插件全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue-cli3.0+element-ui上傳組件el-upload的使用
這篇文章主要介紹了vue-cli3.0+element-ui上傳組件el-upload的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-12-12