使用 Vue.js 事件总线在组件之间传递数据

Vue.js 中的组件通信有时会使用 $emit 和 props 变得复杂和混乱。在组件树嵌套较大的实际应用程序中，使用这种方法传递数据并不方便，因为它只会增加应用程序的复杂性并且使调试非常繁琐。这就是事件总线出现的地方。

事件总线不过是一个全局 Vue 实例，它由参与通信和传递数据的组件导入。它利用 Vue 对象的$on、$emit和$off属性来发出事件并传递数据。事件总线为复杂的 $emit 和 prop 链提供了一个非常简单和优雅的解决方案，在测试和调试时很难追踪。它充当所有涉及的组件发出和侦听事件并相应地执行方法的全局中间体。

句法：

事件总线没有特殊的语法，因为它只是 Vue 类的一个实例。

const EventBus = new Vue();

在职的：

考虑这个简单的组件树，我们需要在黑色和绿色组件之间共享数据。使用 $emit 和 props，这将是一个漫长的过程，首先使用 $emit 通过树向上传递数据和事件，然后使用 props 向下传递树。

然而，使用事件总线，这可以以非常简单和容易的方式执行。

示例：我们将使用与此处说明 $emit 和 props 相同的示例，但是这次使用事件总线。这是一个非常基本的网页，显示一个按钮被点击了多少次。为此，我们有 2 个组件：

• 组件 1：显示组件 2 中的按钮被单击的次数。
• 组件2：一个按钮，当点击时会增加一个计数器。

App.js

  

  import Component1 from './components/Component1.vue'
  import Component2 from './components/Component2.vue'
  
  export default {
    name: 'App',
    components: {
      Component1,Component2
    }
  }

组件1.vue

  

  import EventBus from '../event-bus';
  
  export default {
    name: "Component1",
    data() {
      return {
        labeltext: 0,
      };
    },
    methods: {
      change_n(n) {
        this.labeltext = n;
      },
    },
    created() {
        // Sets up the Event Bus listener using 
        // the custom event name and assosciates
        // it with a component method.
        EventBus.$on("change_n", this.change_n);
      },
    destroyed() {
        // Removes Event Bus listener upon removal
        // of template from DOM.
        EventBus.$off("change_n", this.change_n);
      },
  };

  

  .component1 {
    display: block;
    background-color: green;
    height: 15em;
    text-align: center;
    color: white;
    padding-top: 5em;
  }

组件2.vue

  

  import EventBus from '../event-bus';
  
  export default {
    name: "Component2",
    data() {
      return {
        nclick : 0,
      };
    },
    methods: {
      count() {
        this.nclick += 1;
        // Emitting a custom-event via the Event Bus
        EventBus.$emit("change_n", this.nclick);
      },
    },
  };

  

  .component2 {
    display: block;
    background-color: grey;
    height: 15em;
    text-align: center;
    padding-top: 5em;
  }

事件总线.js

import Vue from 'vue';
  
// Create a new Vue instance and export it
const EventBus = new Vue();
  
export default EventBus;

输出：