vue之bus總線簡(jiǎn)單使用講解

更新時(shí)間：2021年09月13日 14:40:45 作者：牛先森家的牛奶

這篇文章主要介紹了vue之bus總線簡(jiǎn)單使用講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

vue之bus總線的簡(jiǎn)單使用

場(chǎng)景描述：

A組件中包括B，C組件，而B(niǎo)組件中包括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)聽(tīng)item中數(shù)據(jù)加載完
    this.$bus.$on('itemDataLoad', () => {
      console.log('數(shù)據(jù)加載完');
    })
    // this.$bus.$on('事件名稱', 回調(diào)函數(shù)(參數(shù)))
  },

當(dāng)然在A組件中通過(guò) 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')

到此這篇關(guān)于vue之bus總線簡(jiǎn)單使用講解的文章就介紹到這了,更多相關(guān)vue之bus總線簡(jiǎn)單使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

從eleUI的Loading知道了單例模式的用法
這篇文章主要介紹了從eleUI的Loading知道了單例模式的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
vue+axios實(shí)現(xiàn)post文件下載
這篇文章主要為大家詳細(xì)介紹了vue+axios實(shí)現(xiàn)post文件下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
基于Vue實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了基于Vue實(shí)現(xiàn)拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解，需要的朋友可以參考下
2018-04-04
Vue中Router路由兩種模式hash與history詳解
這篇文章主要介紹了Vue中Router路由的兩種模式，分別對(duì)hash模式與history模式作了簡(jiǎn)要分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2021-09-09
關(guān)于keep-alive路由多級(jí)嵌套不生效的解決方案
本文主要介紹了關(guān)于keep-alive路由多級(jí)嵌套不生效的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue點(diǎn)擊按鈕實(shí)現(xiàn)簡(jiǎn)單頁(yè)面的切換
這篇文章主要為大家詳細(xì)介紹了vue點(diǎn)擊按鈕實(shí)現(xiàn)簡(jiǎn)單頁(yè)面的切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
vue實(shí)現(xiàn)簡(jiǎn)單圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue如何在新窗口打開(kāi)頁(yè)面
這篇文章主要介紹了vue如何在新窗口打開(kāi)頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue實(shí)現(xiàn)表單數(shù)據(jù)的增刪改功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單數(shù)據(jù)的增刪改功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue 數(shù)據(jù)(data)賦值問(wèn)題的解決方案
這篇文章主要介紹了vue 數(shù)據(jù)(data)賦值問(wèn)題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2021-03-03