快捷導(dǎo)航

vue中bus的使用及踩坑解決

更新時(shí)間：2023年08月30日 10:27:41 作者：小皮皮不皮

這篇文章主要為大家詳細(xì)介紹了vue中bus的相關(guān)使用以及涉及到的問題與解決,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下

創(chuàng)建一個(gè)js文件

import Vue from "Vue"
export default new Vue

我們可以直接在要使用的頁面中引用使用

import bus from '@/assets/js/eventBus.js';
bus.$emit("info", "123") // 使用
bus.$on("info", (val) => { // 接收
  console.log("info val", val);
})

也可以 main.js中引用定義:

import Bus from '@/assets/js/eventBus.js';  
Vue.prototype.$bus = Bus;  //注意這里的Vue是我上面引入的vue   import Vue from 'vue'
this.$bus.$emit("vaPage",value); //很像父子之間傳值的方法
this.$bus.$on("vaPage", v =>{   //vaPage傳的時(shí)候的key是什么接收就必須是什么
   console.log(v);   //v是傳來的值，可以接收多個(gè)參數(shù)
})

正常的通訊上面就已經(jīng)完成了，但是還有一個(gè)問題那就是如果接受的頁面不存在了，還是會(huì)繼續(xù)執(zhí)行bus.$on,所以我們需要再不需要的時(shí)候或者頁面銷毀時(shí)將bus銷毀

  beforDestroy（）{
     this.$bus.$off("vaPage");  //當(dāng)這個(gè)組件銷毀的時(shí)候bus也跟著一起銷毀
      bus.$off("info") // 或者
  }

但是如果是有個(gè)頁面通訊多個(gè)頁面通用一個(gè)方法我們又該怎么辦呢？比如一個(gè)tab切換，里面分別是不同的內(nèi)容，但是點(diǎn)擊了之后有一個(gè)詳情需要聯(lián)動(dòng)，如下圖:

不可能點(diǎn)擊一個(gè)定義一個(gè)方法，詳情接受所有方法，只能是都是用一個(gè)方法然后通過傳遞特定的標(biāo)識(shí)來進(jìn)行處理！

那么當(dāng)有顯示隱藏功能時(shí)就會(huì)發(fā)現(xiàn)，頁面沒有了正常來說不應(yīng)該再走該頁面接收的方法了，但是現(xiàn)實(shí)情況是一直在調(diào)用，所以使用bus.$off("info")銷毀方法是不對(duì)的，bus是一個(gè)全局的，如果銷毀了會(huì)導(dǎo)致頁面的其他功能不可用。所以想了一個(gè)折中的方法暫時(shí)解決該問題

  data() {
    return {
      lovk: true, // 定義一個(gè)變量
    }
  },
  // 在銷毀前解綁bus
  beforeDestroy() {
    this.lovk = false
    console.log("beforeDestroy", this.lovk)
  },
  mounted() { 
    bus.$on("info", (val) => {
      if (this.lovk) { // 如果this.lovk為true，說明該頁面存在需要執(zhí)行里面的方法，否則就不執(zhí)行
        console.log("info val", val);
      }
    })  
  },
// 那么有人會(huì)說為什么不直接將整個(gè)bus.$on()包裹進(jìn)去呢？如下列：
  mounted() { 
 if (this.lovk) { // 這樣寫都不會(huì)觸發(fā)了不是更好嗎？
    bus.$on("info", (val) => { 
        console.log("info val", val);
    })  
  }
 },
// 其實(shí)是不可行的，實(shí)驗(yàn)一下你會(huì)發(fā)現(xiàn)，當(dāng)你頁面消失在顯示后bus.$on()方法不執(zhí)行了

bus還有很多很多坑需要我們?nèi)プ⒁猓灾?jǐn)慎使用bus，暫時(shí)就介紹這么多!

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

您可能感興趣的文章: