鍍金池/ 問答/HTML/ vue 父組件如果想拿到子組件數(shù)據(jù)應(yīng)該用ref嗎？

vue 父組件如果想拿到子組件數(shù)據(jù)應(yīng)該用ref嗎？

一個(gè)頁面中有很多表單，我將各表單拆分為若干組件

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

父組件將初始數(shù)據(jù)formData傳入，我需要拿到各個(gè)子組件填寫的form表單數(shù)據(jù)，并對(duì)它們進(jìn)行校驗(yàn)，再在父組件提交，this.$refs 取數(shù)據(jù)是好的方法嗎？
感覺這樣寫不太優(yōu)雅

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)
}
回答
編輯回答
若相惜

為什么不用v-model呢？把子組件數(shù)據(jù)響應(yīng)回到父組件

2017年8月17日 18:35
編輯回答
尐懶貓

使用 this.$refs 的一大好處是快！趕工首選方案。
當(dāng)然了，確實(shí)不優(yōu)雅。

這里的話可以遵從vue教程提供的 官方建議

  1. 子組件 : 各個(gè)formComponents

    • 在 props 中顯式的聲明所需要的 key
    • 在子組件更新時(shí)使用事件 this.$emit( 'update:key' , v );

  2. 父組件通過 Vue 2.3+ 中重新支持的 .sync 寫法來完成數(shù)據(jù)的父子同步

    • <form1component :text.sync="text1"></form1component>
    • 使用 computed 整合各個(gè) key 成為一個(gè)輸出對(duì)象
    • 在 save 中校驗(yàn)輸出對(duì)象的值是否正確

對(duì)于以下寫法，實(shí)際上 props 的傳遞只做了淺拷貝，因此formData如果是嵌套對(duì)象的話，formData.a.b的修改會(huì)直接同步到父Vue，但是Vue的默認(rèn)更新體系并不知道這點(diǎn)，也不會(huì)引起相應(yīng)的響應(yīng)式屬性的變更，很容易踩坑，所以在子組件中使用事件體系來精確控制更新時(shí)機(jī)，使用.sync在寫法上讓父組件依然保持?jǐn)?shù)據(jù)驅(qū)動(dòng)的模式。

<form1component :data="formData1"></form1component>
<form2component :data="formData2"></form2component>
<form3component :data="formData3"></form3component>
2018年5月15日 03:34
編輯回答
貓小柒

奇怪...為什么你傳到各個(gè)表單組件的都是formData變量，這樣不會(huì)相互干擾么？
如果是：

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

那就直接取formData1 formData2 formData3就好了

2017年7月11日 08:50
編輯回答
萌小萌

比較好的做法是用自定義事件

2017年9月25日 08:27