VueJS - 向多个组件发出事件（具有不同的父级）答案

【问题标题】：VueJS - Emit event to several components (with varying parents)VueJS - 向多个组件发出事件（具有不同的父级）
【发布时间】：2020-06-16 17:54:57
【问题描述】：

我有一堆这样的 Vue 组件：

App.js
 |
 |-- CreateTasks
 |
 |-- LatestTasks (lists 20 tasks)
 |
 |-- FooBar
 |   |---LatestTasks (lists 10 tasks)

在CreateTasks 中创建任务时，我想发出一个事件，该事件被任何其他最新任务组件捕获，因此它知道更新列表。

不过，我无法让它工作。

这是我的代码：

在 CreateTasks 中

  methods: {
    createTask(){
      let task = { name: 'newTask' };
      this.$emit( 'new-task-created' );
    }
  }

在最新任务中

  methods: {
    getLatestTasks(){
      ...
    }
  }
  created() {
    window.addEventListener('new-task-created', this.getLatestTasks );
  },

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

为此，最适合使用Vuex。您可以在dispatch() 中向 Vuex 存储操作，而不是在 createTask() 中发出事件。并且在您希望了解此数据的每个组件中，您添加一个计算属性，该属性链接到特定的 Vuex getter。

Vuex Docs

另一种选择是按照您最初的提议发出一个事件，但您必须在父组件中侦听它，然后将其存储在该父组件的局部变量中，最后创建一个 prop 用于每个组件都会收到更新后的 newTask。

我希望这会有所帮助，如果您希望我可以为您提供更详细的实施示例。

【讨论】：

【解决方案2】：

你最好使用 Vuex 或 redux。但如果你只是想使用事件，或者它是一个快速的小应用程序，你只需要快速破解：

将事件附加到根元素：

this.$root.$on('myevent',function(data){console.log(data)})

然后从根元素发出事件：

this.$root.$emit('myevent',{data:1234}}

或者创建一个 EventBus：

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

在 EventBus 上收听：

// component1.js
import Vue from 'vue'
import EventBus from './eventbus'
Vue.component('component1', {
  mounted () {
    EventBus.$on('myevent', function (data) {
       console.log(data)
    });
  }
});

在 EventBus 上发出事件：

// component2.js
import Vue from 'vue'
import EventBus from './eventbus'
Vue.component('component2', {
  methods: {
    emitMethod () {
       EventBus.$emit('myevent', {data: 1234});
    }
  }
});

【讨论】：