# 事件总线

EventBus 又称为事件总线。在 Vue 中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的 “灾难”,因此才需要更完善的 Vuex 作为状态管理中心,将通知的概念上升到共享状态层次。

// 原理上就是建立一个公共的 js 文件,专门用来传递消息
// bus.js
import Vue from 'vue'
export default new Vue;
// 在需要的 .vue 传递消息的页面引入
import bus from './bus.js'
// 传递消息
bus.$emit('msg', val)
// 接收消息
bus.$on('msg', val => {
    console.log(val)
})

# Demo

src 下新建一个 bus.js

// bus.js
import Vue from 'vue'
export default new Vue

创建页面 A

<!-- A.vue-->
<template>
  <p>A.vue:<button @click="sendMsg">发送</button></p>
</template>
<script>
import bus from '../util/bus'
export default {
  methods: {
    sendMsg() {
      bus.$emit("aMsg","来自A页面的消息")
    }
  },
}
</script>
<style>
</style>

创建页面 B

<!-- B.vue-->
<template>
  <div>B.vue:<!--swig0--></div>
</template>
<script>
import bus from '../util/bus'
export default {
  data() {
    return {
      msg: ''
    }
  },
  mounted () {
    // $on 事件返回一个回调函数可以用箭头函数来写
    bus.$on("aMsg", (msg)=>{
      // 接收 A 页面的消息
      console.log(msg);
      this.msg = msg;
    });
  },
}
</script>
<style>
</style>

App.vue 引入上面两个页面

<template>
  <div id="app">
    <router-view/>
    <apage></apage>
    <bpage></bpage>
  </div>
</template>
<script>
import Bpage from './views/B'
import Apage from './views/A'
export default {
  components: {
    Bpage,
    Apage,
  },
}
</script>
<style>
</style>

# 测试

A 组件点击发送!

B 组件收到 A 组件的消息

# 单次接收事件或移除所有事件监听

如果你只想监听一次该事件。可以使用 bus.$once(event, callback) 事件触发一次后将移除事件。

mounted () {
    // bus.$on("aMsg", (msg) => {
    //   // 接收 A 页面的消息
    //   console.log(msg);
    //   this.msg = msg;
    // });
    bus.$once("aMsg", (msg) => {
      // 接收 A 页面的消息
      console.log(msg);
      this.msg = msg;
    });
  },

bus.$on(event, callback)

bus.$once(event, callback)

如果你想移除自定义事件监听器,你可以使用 bus.$off(event, callback) 来实现。该方法如果没有提供参数,则移除所有的事件监听器;如果只提供事件,则移除该事件所有的监听器;如果同时提供了事件与回调,则只移除这个回调的监听器。

# 结语

「一个激情灵魂的觉醒者,不是相信而是看见:除了旷野和经历,没有什么比内心的冲动更真诚、更迷人。」———— 屠夫十字镇

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

乡树 微信支付

微信支付

乡树 支付宝

支付宝