Vue.js 将表单数据（v-model）值从父级传递给子级？答案

【问题标题】：Vue.js pass form data (v-model) values from Parent to Child?Vue.js 将表单数据（v-model）值从父级传递给子级？
【发布时间】：2021-05-21 22:04:51
【问题描述】：

我有一个使用 vue.js 的两个组件表单，其中父表单启动多步流程并使用 v-model 收集两个输入，如果这些是有效值，则表单使用子组件移动到表单的下一个组件。我想做的是获取父 2 值并将它们附加到子组件 formData 对象以进行提交。有没有办法将值传递给子组件？我假设 props 但不确定如何只传递值而不是 $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)

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案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 生态系统中可用的其他一些策略来传递数据。

【讨论】：