Question

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

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'
        })
      });
    }
  }
...

Answer 1

为此，我将命名 input，并在 <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

Answer 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 对象中同步了表单数据

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

2 个答案: