如何在多個孩子Vue組件中捕獲事件

我正在vue中構建一個表單框架。我有每種字段類型的組件。每個字段類型組件都使用它。$ emit與父組件進行通信更改。如何在多個孩子Vue組件中捕獲事件

我能夠觸發使用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) 
}

來源

2017-01-16 rhoward

對於你的情況，你可以使用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) 
    }, 
    }, 
})

來源

2017-01-16 15:15:00 Saurabh

你引用this.validate（）但是這不需要在這個子組件中定義validate方法嗎？我的意圖是，我會保留在父組件中的驗證邏輯，以便它可以在各個子組件之間共享。 – rhoward

對不起，我剛剛明白你的觀點 - 你說我可以從父母傳遞驗證方法。我想這會工作，但它不會減少我的代碼。我已經得到了它在我原來的例子中的工作，在那裏我顯式觸發每個字段的父級驗證方法。我所瞄準的是一種通用的方法，它可以捕捉來自孩子的所有*排放的確認信息，而無需逐場明確。 – rhoward

@rhoward通過我的方法，您可以在這些組件內移動與錯誤消息等有關的顯示代碼。關於與重用代碼有關的觀點，您可以查看[mixins]（https://vuejs.org/v2/guide/mixins.html#ad），您可以在其中嘗試使用常用功能並將其重用到組件中。 – Saurabh

如何在多個孩子Vue組件中捕獲事件

回答

相關問題