Vue之间的通信

EventBus

EventBus又称为事件总线。跟注册发布的思想很像。所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所有组件都可以上下平行地通知其他组件。

接下来看看再vue中如何使用EventBus

初始化EventBus

方式一：
在utils中新建一个eventbus.js

// eventbus.js
import Vue from 'vue'
export const EventBus = new Vue()

方式二：
可以直接在项目中的main.js初始化 EventBus：

// main.js
Vue.prototype.$EventBus = new Vue()

注意，这种方式初始化的 EventBus 是一个全局的事件总线。

发送事件

假设你有两个Vue页面需要通信：A和B，A页面在按钮上绑定了点击事件，发送一则消息，想通知B页面。

<!-- A.vue -->
<template>
    <button @click="sendMsg()">test</button>
<template>
<script>
import { EventBus } from "@/utils/eventbus"
export default {
    methods: {
    sendMsg() {
      EventBus.$emit("aMsg", "来自A页面的消息")
    }
  }
}
</script>

接收事件

<!-- B.vue -->
<template>
    <p>{{ msg }}</p>
<template>
<script>
import { EventBus } from "@/utils/eventbus"
export default {
    data() {
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      this.msg = msg
    })
  }
}
</script>

移除事件

import { EventBus } from "@/utils/eventbus"
EventBus.$off('aMsg', {})

你可以使用 EventBus.$off('aMsg')来移除应用内所有对此某个事件的监听。也可以使用EventBus.$off()来移除所有事件频道，不需要添加任何参数。