Как поймать события на нескольких дочерних компонентах Vue

Question

Я создаю структуру формы в vue. У меня есть компоненты для каждого типа поля. Каждый компонент типа поля использует это. $ Emit для обмена изменениями с родительским компонентом.

Я могу вызвать события в родительском компоненте, используя V-на директивы следующим образом:

<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 на всех его дочерних компонентах?

Редактировать: Я ищу что-то вроде ниже, хотя $ на только улавливает излучает, которые происходят в пределах одного компонента, а не своих детей

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

Answer 1

В вашем случае вы можете использовать v- модель, как следующее:

<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> 

v-model является по существу синтаксисом для обновления данных о введенных пользователем событий.

<input v-model="something"> 

это просто синтаксический сахар для:

<input v-bind:value="something" v-on:input="something = $event.target.value"> 

Вы можете пройти пропеллер: value в дочерних компонентов, а также перед изменением поля ввода вызова функции для проверки, которая также передается в качестве опоры.

Vue.component('form-select', { 
    props: ['options', 'value', 'onChange', 'validate'], //Added one more prop 
    template: '#your-template', 
    mounted: function() { 
    }, 
    methods: { 
    change (opt) { 
     if (this.validate !== undefined) { 
     var isValid = this.validate(this.value) 
     if(!isValid) return; 
     } 
     this.$emit('input', opt) 
    }, 
    }, 
})