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

Question

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

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

SignupPage.vue有一个 function寄存器，它向某个端点发送一个 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()
      }

     },


  }
...

表单域.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>

注册页面.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'
        })
      });
    }
  }
...

Answer 1

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

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

    <template> <form v-on:submit.prevent="execute"> <FormField v-for="(field) in fields":name="field" /> </form> </template>

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

    execute(e) { const form = e.target const formData = new FormData(form) if (this.inputFunction) { this.inputFunction(formData) } }

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

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

演示

Answer 2

您可以使用 js 对象中的路径引用来同步 vue 中的数据，如下所示：

注册页面.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" />

表单域.vue：

props: ['formData', 'field']

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

那么您已经在 signupPage.vue 中的 formData Object 中同步了表单数据