Question

我正在vue中构建一个表单框架。我有每种字段类型的组件。每个字段类型组件都使用此。$ 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

最好的方法是使用event bus，或者在我看来vuex更好。

对于第一种情况，请查看here

第二个here

使用event bus，您可以发出一个事件，并随时收听该事件（在父级，子级甚至在同一个组件中）

Vuex It serves as a centralized store for all the components in an application，您可以在该商店中拥有属性，并且可以使用和操作它们。

事件总线示例：

<强> main.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

Answer 2

对于您的情况，您可以使用如下的v-model：

<select>

v-model本质上是用于更新用户输入事件数据的语法糖。

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

只是语法糖：

<input v-model="something">

您可以在子组件中传递道具：<input v-bind:value="something" v-on:input="something = $event.target.value">，并在更改输入字段之前调用一个函数来验证哪个也作为道具传递。

value

如何跨多个子Vue组件捕获事件

2 个答案: