vue bus總線的使用

場景描述

A組件中包括B，C組件，而B組件中包括D組件，這時如果D組件想要在A組件中觸發(fā)C組件的方法怎么辦呢？

當(dāng)然方案是有的，用狀態(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ù)))
? },

當(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ù)的值 ...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')

bus總線的原理解析

關(guān)于官方介紹 從 Vue 1.x 遷移 — Vue.js

 在官方文檔中對bus總線的介紹是使用，但是明確指出了復(fù)雜情況推薦使用vuex實(shí)現(xiàn)非父子組件直接的傳值，bus總線應(yīng)用在簡單的項(xiàng)目

1.怎么理解bus總線

bus總線就是一個中間組件,觸發(fā)事件，觸發(fā)中間組件，監(jiān)聽中間組件的變化

2.bus組件存在的條件和注冊

• 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í)例對象vc,或者vueComponent的實(shí)例對象vm

掛載到哪都可以訪問？必然是原型上

vue.prototype.$bus = vue的實(shí)例對象/vueComponent的實(shí)例對象

第一種：

Vue.prototype.$bus = vueComponent的實(shí)例對象(所有的vueComponent的實(shí)例對象都是（Vue.extentd構(gòu)造的)

第二種：

在生命周期創(chuàng)建之前 Vue.prototype.$bus = vue的實(shí)例對象

第三種：

利用插件進(jìn)行掛載

安裝 - npm install vue-bus

注冊使用：

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é)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論