event-bus

最新推荐文章于 2025-01-02 14:33:19 发布

原创最新推荐文章于 2025-01-02 14:33:19 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

10 篇文章

订阅专栏

先命名一个event-bus.js，创建一个新的全局Vue实例，命名为EventBus并且导出该对象。

import Vue from 'vue';
import EventBus from 'event-bus'
Vue.component('component-a', {
  ...
  methods: {
    emitMethod () {
       EventBus.$emit('EVENT_NAME', payLoad);
    }
  }
});

在另外一个组件B中，我们可以注册一个监听事件，来监听由EventBus传递来的事件“EVENT_NAME”。

import Vue from 'vue';
import EventBus from './event-bus';
Vue.component(‘component-b’, {
  ...
  mounted () {
    EventBus.$on('EVENT_NAME', function (payLoad) {
      ...
    });
  }
});

这样B组件就可以监听A组件触发的事件，而不需要考虑过多的层级问题。
注：早点上vuex少纠结了

还有一种伪兄弟组件通讯，event-bus是通过子组件，还可以通过父组件（vuex的思想），使用vuex将所有组件当做其的子组件。