如何从父表单组件获取数据到子组件嵌套组件数据从父到子答案

【问题标题】：How to get data from parent form component to child component nested components data from parents to children如何从父表单组件获取数据到子组件嵌套组件数据从父到子
【发布时间】：2021-04-18 04:50:33
【问题描述】：

我有三个 Vue 组件：FormField.vue、GenericForm.vue（包含FormField）和SignupPage.vue（包含@ 987654322@)

GenericForm.vue 有一个 inputFunction 属性，它是一个由子组件传递给它的函数。它在按钮单击时执行。

SignupPage.vue 有一个register 函数，它向某个端点发送一个 post 请求。

我需要以某种方式从 GenericForm.vue 中的字段中获取字段的数据，以便在 SignupPage.vue 中单击按钮时发送数据> 组件。

GenericForm.vue：

<template>
  <form v-on:submit.prevent="execute()"

        class="signup-form   rounded-lg
              p-10 m-auto  align-middle content-center
              space-y-6
              flex flex-col  items-center justify-center
                ">
    <div class="title-text light-text text-xl">Signup</div>

    <FormField v-for="(field) in fields"
               v-bind:key="field" :placeholder="field"
    />

    <GenericButton :text="buttonText"/>

  </form>
</template>

export default {
  components: {GenericButton, FormField, ArticleList},

  props: {
    title: {
      type: String,
      required: true
    },
    fields: {
      type: Array,
      required: true
    },
    buttonText: {
      type: String,
      required: true
    },
    inputFunction: {
      type: Function
    }
  },
...

...
  methods: {
    execute() {
      console.log("GenericForm.vue")

      if (this.inputFunction) {
        this.inputFunction()
      }

     },


  }
...

FormField.vue：

<template>

  <input :placeholder= "placeholder"
      class = "  form-field
            p-2 pl-0  pt-4 pb-2  w-1/3 "

  />

</template>

<script>
export default {
  props: ['placeholder']
}
</script>

SignupPage.vue：

<template>
  <div class=" ">
    <GenericForm title = "Sign Up" button-text= "Sign Up"
             :fields="['Username', 'Email', 'Password']"
             :inputFunction = "register"
    />
  </div>
</template>

...
  methods:  {
    async register() {
      console.log("register()")
      const response = AuthenticationService.register({
        email: 'wwwwww',
        password: 'frgr'
      }).then((response) => {

        console.log(response)
        console.log(this.$store)
        this.$router.push({
          name: 'ha'
        })
      });
    }
  }
...

【问题讨论】：

您可以使用 props 将数据从父级传递到子级，或者当您想要在多级层次结构中传递数据时可以使用 EventBus。但我认为最好的方法是使用 Vuex。

标签： javascript vue.js vuejs2

【解决方案1】：

为此，我将命名为inputs，并在<form> 元素上使用new FormData()，这将自动收集表单中任何位置的所有命名字段（甚至是深层嵌套的字段）。

在GenericForm.vue 中，将v-on:submit 的值从execute() 更新为execute（只是方法名称），以便submit-event 数据自动传递给处理程序。我们将使用此事件数据来获取表单。还将<FormField>.name 绑定到每个field。
```
<template>
  <form v-on:submit.prevent="execute">
    <FormField v-for="(field) in fields" :name="field" />
  </form>
</template>
```

更新execute() 以接收事件数据，从中创建FormData，并将结果作为参数传递给inputFunction()：

execute(e) {
  const form = e.target
  const formData = new FormData(form)

  if (this.inputFunction) {
    this.inputFunction(formData)
  }
}

在SignupPage.vue 中，更新register 以接收表单数据：

async register(formData) {
  const email = formData.get('Email')
  const password = formData.get('Password')
  //...
}

demo

【讨论】：

【解决方案2】：

你可以使用js对象中的路径引用来同步vue中的数据：

SignupPage.vue：

data: {
  formData: {}
}
<GenericForm :formData="formData" :fields="['Username', 'Email', 'Password']" />

GenericForm.vue：

props: ['formData']

<FormField v-for="(field) in fields" v-bind:key="field" :field="field" :formData="formData" />

FormField.vue：

props: ['formData', 'field']

<input type="text" v-model="formData[field]" />

那么你已经在 signupPage.vue 的 formData 对象中同步了表单数据

【讨论】：