vue 父组件如果想拿到子组件数据应该用ref吗？

Question

一个页面中有很多表单，我将各表单拆分为若干组件

<form1component ref="form1component" :data="formData"></form1component>
<form2component ref="form2component" :data="formData"></form2component>
<form3component ref="form3component" :data="formData"></form3component>

父组件将初始数据formData传入，我需要拿到各个子组件填写的form表单数据，并对它们进行校验，再在父组件提交，this.$refs 取数据是好的方法吗？
感觉这样写不太优雅

save () {
 const form1Data = this.$refs.form1component.form1Data
 const form2Data = this.$refs.form2component.form2Data
 const form3Data = this.$refs.form3component.form3Data
 const form1 = this.$refs.form1component.$refs.form1
 const form2 = this.$refs.form2component.$refs.form2
 const form3 = this.$refs.form3component.$refs.form3
 var ok1 = form1.validate()
 var ok2 = form2.validate()
 var ok3 = form3.validate()
 if(ok1 && ok2 && ok3)
  http.post(...form1Data,...form2Data,...form3Data)
}

Answer 1

使用 this.$refs 的一大好处是快！赶工首选方案。
当然了，确实不优雅。

这里的话可以遵从vue教程提供的 官方建议

1. 子组件 : 各个formComponents

   • 在 props 中显式的声明所需要的 key
   • 在子组件更新时使用事件 this.$emit( 'update:key' , v );

2. 父组件通过 Vue 2.3+ 中重新支持的 .sync 写法来完成数据的父子同步

   • <form1component :text.sync="text1"></form1component>
   • 使用 computed 整合各个 key 成为一个输出对象
   • 在 save 中校验输出对象的值是否正确

---

对于以下写法，实际上 props 的传递只做了浅拷贝，因此formData如果是嵌套对象的话，formData.a.b的修改会直接同步到父Vue，但是Vue的默认更新体系并不知道这点，也不会引起相应的响应式属性的变更，很容易踩坑，所以在子组件中使用事件体系来精确控制更新时机，使用.sync在写法上让父组件依然保持数据驱动的模式。

<form1component :data="formData1"></form1component>
<form2component :data="formData2"></form2component>
<form3component :data="formData3"></form3component>

Answer 2

奇怪...为什么你传到各个表单组件的都是formData变量，这样不会相互干扰么？
如果是：

<form1component :data="formData1"></form1component>
<form2component :data="formData2"></form2component>
<form3component :data="formData3"></form3component>

那就直接取formData1 formData2 formData3就好了

Answer 3

比较好的做法是用自定义事件

Answer 4

为什么不用v-model呢？把子组件数据响应回到父组件