如何使用Vue從父級中的多個子組件獲取值？

Question

我正在構建一個包含主要組件的視圖，我們稱之為ContentComponent ，它充當表單列表的父級，每個表單都是自己的組件，例如：

• EvaluationForm
• ExperienceForm
• ContactForm
• HobbiesForm

我在這里嘗試構建的只是一個大表單，它允許我在具有如下結構的單個 javascript 對象中獲取所有這些信息：

content: {
   evaluation: {},
   experience: [{}, {}, ...],
   contact: {},
   hobbies: [{}, {}, ...]
}

但我不確定如何從父組件獲取每個子組件的值，我在每個組件上使用ref屬性通過this.$refs訪問數據，但這是否也適用於相同的多個實例成分？ 由於我在其中一些表單下有一個按鈕來添加組件的另一個實例，因此我可以有多種愛好和多種體驗，例如，我將如何動態訪問這些組件的值？

Answer 1

您可以為每個組件使用 v-model。

<v-evaluation v-model="evaluation" />
<v-experience v-model="experience[0]" />
<v-experience v-model="experience[1]" />

例如，在您的自定義表單中應該必須在更改時發出值。

參考： v-model