事件总线—Event Bus 使用及讲解

一、工作原理

事件总线，主要用来实现非父子组件之间的传值。

它的工作原理：通过new Vue()再创建一个新的 Vue 实例对象bus，将这个新的实例对象作为桥梁，来实现两个组件之间的传值。

二、工作步骤

1、创建事件总线 bus

我们可以在项目的 src 目录中，新建一个/utils/bus.js 文件，然后在该文件中，来生成 bus 对象：

import Vue from "vue";
const bus = new Vue();
export default bus;

2、设置监听器（给 bus 添加事件）

我们需要在“接收数据”的组件中，给事件总线身上添加一个事件。

import bus from "./bus.js";
export default{
    mounted() {
        // 给事件总线身上添加一个事件(箭头函数默认不会执行)
        bus.$on("getData",(data) => {
            console.log("其他组件传递的数据"，data);
        })
    }
}

3、调用 bus 的事件

我们在需要“传递数据”的组件中，来调用事件总线身上的方法，同时传值：

import bus from "./bus.js";
export default{
    data() {
        return {
            num: 1,
        };
    },
    methodes: {
        postData() {
            // 调用事件总线身上的方法，同时传值
            bus.$emit('getData',this.num);
        },
    },
};

三、注意事项

在使用事件总线时，负责“接收数据”的组件，需要提前先渲染出来，执行生命周期函数，同时给事件总线添加事件。

如果“接收数据”和“传递数据”的组件是同时渲染出来的，我们就可以用事件总线来实现两个组件之间的传值。但是，如果“接收数据”的组件，比“传递数据”的组件后渲染，就不能使用事件总线。