快捷導(dǎo)航

Vue中使用和移除總線Bus的注意事項(xiàng)詳解

更新時(shí)間：2023年04月28日 09:57:57 作者：anjushi_

Vue中的總線Bus是一種通信機(jī)制，可用于組件間的數(shù)據(jù)傳遞和事件觸發(fā)。使用時(shí)需要注意Bus的命名和定義、監(jiān)聽(tīng)和觸發(fā)事件的方法、移除和銷毀Bus的時(shí)機(jī)和方式等問(wèn)題。合理使用總線Bus可以提高組件的復(fù)用性和可維護(hù)性，但過(guò)度依賴可能會(huì)導(dǎo)致代碼耦合和難以維護(hù)

初始化并封裝

在main.js中對(duì)bus進(jìn)行初始化， Bus是一個(gè)不具備 DOM 的組件，它具有的僅僅只是它實(shí)例方法

Vue.prototype.$bus = new Vue({
  methods: {
    emit(event, ...args) {
      this.$emit(event, ...args);
    },
    on(event, callback) {
      this.$on(event, callback);
    },
    off(event, callback) {
      this.$off(event, callback);
    }
  }
});

主要是用on代替$on，也可以使用簡(jiǎn)化的初始化，如下，組件中也帶$即可

Vue.prototype.$bus = new Vue();

組件中可以使用this.$bus可以查看bus的實(shí)例

console.log(this.$bus);

發(fā)送事件

兩個(gè)參數(shù)，前一個(gè)是事件標(biāo)識(shí)，后一個(gè)是發(fā)送的內(nèi)容

this.$bus.emit("radioChange", "test");

接收事件

方式一（推薦）

this.$bus.on('radioChange', this.Aaa);
Aaa(ii){
  console.log("radioChange", ii)
}

方式二（不推薦）

this.$bus.on('radioChange', res => {
  console.log("radioChange", res)
})

移除事件監(jiān)聽(tīng)

如果不移除，每次進(jìn)入組件都會(huì)新建一個(gè)bus監(jiān)聽(tīng)，導(dǎo)致不斷重復(fù)

在組件的beforeDestroy階段執(zhí)行

方式一：只移除本組件的bus監(jiān)聽(tīng)

beforeDestroy() {
  this.$bus.off("radioChange", this.Aaa);
},

盡管組件 A 和組件 B 的事件處理器名稱可能相同，但它們是不同的函數(shù)實(shí)例。這是因?yàn)樵诿總€(gè)組件中，這些方法都是組件實(shí)例的成員。因此，當(dāng)一個(gè)組件在銷毀時(shí)調(diào)用 off，它不會(huì)影響其他組件的事件監(jiān)聽(tīng)器。

實(shí)際上，每個(gè)組件都有自己獨(dú)立的作用域，this.Aaa() 在組件 A 和組件 B 的上下文中都是指向組件自己的方法。因此，在組件銷毀時(shí)使用 this.$bus.off('radioChange', this.Aaa) 只會(huì)移除當(dāng)前組件的監(jiān)聽(tīng)器，不會(huì)影響其他組件的監(jiān)聽(tīng)器。

如果接收事件使用方式二，是無(wú)法使用此方法進(jìn)行移除的

方式二

會(huì)移除所有事件標(biāo)識(shí)為radioChange的bus事件監(jiān)聽(tīng)

this.$bus.off("radioChange");

如果要使用這種方式，需要為每個(gè)組件都制定名稱不同的事件標(biāo)識(shí)

要避免這種情況，需要為每個(gè)組件提供唯一的事件處理函數(shù)（發(fā)送和接收均使用方式一）

方式三

移除全部監(jiān)聽(tīng)，慎用

this.$bus.off();

實(shí)際使用

發(fā)送組件

<template>
  <div class="page-all">
    <el-button @click="sendBus">sendBus</el-button>
    <el-button @click="showA = !showA">Turn showA</el-button>
    <el-row style="height: 300px;">
      <el-col :span="12" v-if="showA">
        <Ar></Ar>
      </el-col>
      <el-col :span="12">
        <Br></Br>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showA: true,
    }
  },
  methods: {
    sendBus(){
      // console.log(this.$bus);
      console.log("send");
      this.$bus.emit("radioChange", "test");
    },
  },
  mounted() {},
}
</script>
<style scoped></style>
<style></style>

組件A

<template>
  ...
</template>
<script>
export default {
  data() {
    return {}
  },
  components: {},
  methods: {
    Aaa(ii){
      console.log("radioChange", ii)
    }
  },
  mounted() {
    this.$bus.on('radioChange', this.Aaa);
  },
  beforeDestroy(){
    this.$bus.off("radioChange", this.Aaa);
  },
}
</script>

組件B

<template>
  ...
</template>
<script>
export default {
  ...
  methods: {
    Aaa(ii){
      console.log("radioChange", ii)
    }
  },
  mounted() {
    this.$bus.on('radioChange', this.Aaa);
  },
  beforeDestroy() {
    this.$bus.off("radioChange", this.Aaa);
  },
}
</script>
...