如何使用Vue从父级中的多个子组件中获取值？答案

【问题标题】：How to get values from multiple child components in parent using Vue?如何使用Vue从父级中的多个子组件中获取值？
【发布时间】：2021-09-26 16:38:14
【问题描述】：

我正在构建一个包含主组件的视图，我们称之为ContentComponent，它充当表单列表的父级，每个表单都是自己的组件，例如：

我在这里尝试构建的只是一个大表单，它允许我在一个 javascript 对象中获取所有这些信息，其结构如下：

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

但我不确定如何从父组件获取每个子组件的值，我在每个组件上使用ref 属性通过this.$refs 访问数据，但这也适用于多个相同组件的实例？由于我在其中一些表单下有一个按钮来添加组件的另一个实例，所以我可以有多种爱好和多种体验，例如，我如何动态访问这些组件的值？

【问题讨论】：

【解决方案1】：

您可以为每个组件使用 v-model。

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

例如，在您的自定义表单中应该必须发出更改值。

参考：v-model

【讨论】：