event-bus

最新推荐文章于 2024-01-18 20:25:48 发布

虚光

最新推荐文章于 2024-01-18 20:25:48 发布

阅读量184

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_37584021/article/details/78747105

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

先命名一个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将所有组件当做其的子组件。