Vue.js传递表单数据(v-model)值从父到子?

Question

我有一个使用vue.js的双组件表单，其中父表单开始多步骤过程，并使用v-model收集两个输入，如果这些是有效值，则表单使用子组件移动到表单的下一个组件。我想做的是将父组件2的值附加到子组件formData对象以提交。是否有一种方法将值传递给子组件?我假设道具，但不确定如何只是传递值，而不是$emit一个函数。

父:

<div class="row--flex">
<input type="text" class="form-input text-input center-margin" name="deductibleCardId" id="deductibleCardId" v-model="$v.formData.deductibleCardId.$model" />

<input type="text" class="form-input text-input center-margin" name="savingsCardId" id="savingsCardId" v-model="$v.formData.savingsCardId.$model" />
</div>
//child component call
<GetCard v-if="showDemographics" :is-sub-form="true" @submit="submitDemographics" />
data() {
return {
formData: {
hasCard: null,
deductibleCardId: null,
savingsCardId: null
}
}

子组件表单数据:

const formData = new FormData()
formData.append('method', 'activate')
(have these two values be brought over from parent values)
formData.append('card_hd', this.formData.deductibleCardId)
formData.append('card', this.formData.savingsCardId)

Answer 1

是的，道具就是你想要的。像这样，假设您的两个值是deductibleCardId和savingsCardId，并且都是字符串类型:

父组件:

<GetCard :deductibleCardId='deductibleCardId' :savingsCardId='savingsCardId'>

子组件:

props: {
deductibleCardId: String,
savingsCardId: String,
}

从这里开始，你可以在你的子组件中使用this.deductibleCardId和this.savingsCardId对这些值做任何你想做的事情。例如，您可以将它们附加到formData:

formData.append('card_hd', this.deductibleCardId);
formData.append('card', this.savingsCardId);

您不需要发出任何东西来将该数据从父级传递到子级。为了将某物传递回"上";对于父节点，您需要使用emit或使用Vue生态系统中可用的其他策略来通信数据。