Vue.js 从多个子组件向父组件获取数据

我需要从所有子组件收集数据，并在父组件中获取数据。 例如，我有一个带有“保存”按钮的表单组件。 一旦我点击“保存”按钮，我需要所有子组件将用户放在那里的所有数据发送给我

<Form>
  <Name />
  <DatePicker />
  .....
</Form> 

.....

因此，主要组件是表单，它有几个子组件。在中单击“保存”后，我需要在表单中获取子组件数据

我正在考虑为所有子组件提供“ref”，并在单击表单内部的“Save”后在父组件中调用它们自己的方法。在这些方法中，我将使用this.$emit收集所有数据和激发事件，在那里我可以将收集到的数据发送给父级

这是一个好的解决方案吗

---

或者使用EventBus更好？

我更喜欢

bind

而不是

emit

Vue.component（“InputField”{
模板：``，
名称：“输入字段”，
道具：{
值：字符串
},
计算：{
同步值：{
得到（）{
返回此.value；
},
集合（v）{
这是.$emit（“输入”，v）；
}
}
}
});
Vue.component（“表单”{
模板：`Save`，
名称：“表格”，
数据（）{
返回{
姓名：“，
姓：“
};
},
方法：{
保存（）{
警报（`this.name}${this.姓氏}`）；
}
}
});
新Vue({
模板：``
}).$mount（“#app”）

几分钟前我写了一篇相关文章。您需要子组件将其更改发送到父组件：我明白了。所以主要的一点是：$watch并使用它，我们跟踪变化并通知家长。但我的情况有点复杂。只有当我点击父组件中的“保存”按钮时，我才需要从子组件获取信息。因此，在父组件告知子组件之前，子组件不应传递任何数据。您是否有表单组件，您在其插槽中提供了其他组件，例如名称、日期选择器，并且您希望这些子组件中的数据在按“保存”后进入此表单？使用具有不同子组件的多个表单组件会在每个表单中产生单独的数据集？我不使用插槽。我有一个表单父组件，里面有7个子组件。是的，在表单组件中按“保存”后，我需要从表单组件中的所有子组件获取所有数据……我知道组件代码类似于双向绑定到
.sync
修改器，但是
v-model
在这种情况下对我来说更具可读性感谢您的帮助。但如果我有这样的“datepicker”组件：其中的datepicker有2个vuejs datepicker和4个输入字段。因此，该组件用于从日期+时间和截止日期+时间中选择任意一个。所以我不能用我所理解的v-model。我试图添加。sync:但即使我将dateTo更改为inside Well，我也只能找到一种方法：在子组件中的数据更改后发出事件，并在父组件中捕获该事件并更新其状态。但由于我有一个由3个或更多组件组成的链，我会使用EventBus来实现这一点。