複数の子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-bind:value="something" v-on:input="something = $event.target.value"> 

あなたが小道具を渡すことができます：子コンポーネントでvalueを、入力フィールドを変更する前にも小道具として渡された検証する関数を呼び出す

<input v-model="something"> 

がためだけの構文糖です。

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) 
    }, 
    }, 
})