vue 非父子间传值：事件总线（$eventBus）

事件总线

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

1
2
3

// 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：{{ msg }}</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;
  });
},