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

Posted 2023-02-23

【中文标题】如何使用Vue从父级中的多个子组件中获取值？

【英文标题】：How to get values from multiple child components in parent using Vue?

【发布时间】：2021-09-26 16:38:14

【问题描述】：

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

EvaluationForm ExperienceForm ContactForm HobbiesForm

我在这里尝试构建的只是一个大表单，它允许我在一个 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