vue.js - 如何跨多个子 Vue 组件捕获事件

Question

我正在用 vue 构建一个表单框架。我有每个字段类型的组件。每个字段类型组件都使用 this.$emit 与父组件进行通信。

我可以使用 v-on 指令在父组件中触发事件，如下所示:

<template>
<div v-if="fieldsLoaded">
    <form-select :field="fields.title" v-on:updated="validate" ></form-select>
    <form-input :field="fields.first_name" v-on:updated="validate" ></form-input>
</div>
</template>

但是，我不想手动指定每个组件都应该单独触发 validate 方法。

如何让父组件监听其所有子组件发出的 updated？

编辑:我正在寻找类似下面的东西，尽管 $on 只捕获发生在同一组件内的发射，而不是它的子组件

created: function(){
    this.$on('updated',validate)
}

Answer 1

The best way is to use event bus or even better in my opinion vuex.

第一个案例请看here

对于第二个here

使用事件总线，您可以发出事件，并在需要时随时收听该事件(在父级、子级甚至在同一组件中)

Vuex 它作为应用程序中所有组件的集中存储，您可以在该存储中拥有属性，并且可以使用和操作它们。

事件总线示例:

ma​​in.js:

import Vue from 'vue'
import App from './App.vue'

export const eventBus = new Vue();

new Vue({
  el: '#app',
  render: h => h(App)
})

用户组件

<template>
  <button @click="clicked">Click me to create event</button>
</template>
<script>
    import { eventBus } from './main'
    export default {
    name: 'User',
    methods: {
        clicked() {
        eventBus.$emit('customEvent', 'a text to pass')
      }
    }
  }
</script>

管理组件

<template>
 <p>The message from event is: {{message}}</p>
</template>
<script>
    import { eventBus } from './main'
    export default {
    name: 'Admin',
    data: () => ({
        message: ''
    })
    created() {
        eventBus.$on('customEvent', dataPassed => {
        this.message = dataPassed
      }
    }
  }
</script>

查看this Vuex 教程