Vue传递值并提交

1. 封装好的子组件 (MyForm.vue)

<template>
  <form @submit.prevent="handleSubmit">
    <label for="name">Name:</label>
    <input type="text" v-model="formData.name" />

    <label for="email">Email:</label>
    <input type="email" v-model="formData.email" />

    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  props: {
    initialData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      formData: {
        name: this.initialData.name || '',
        email: this.initialData.email || ''
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$emit('formSubmit', this.formData);  // 向父组件提交数据
    }
  }
};
</script>

2. 父组件 (App.vue)

<template>
  <div>
    <h1>Parent Component</h1>
    <MyForm :initialData="formData" @formSubmit="handleFormSubmit" />
  </div>
</template>

<script>
import MyForm from './components/MyForm.vue';

export default {
  components: {
    MyForm
  },
  data() {
    return {
      formData: {
        name: 'John Doe',
        email: '[email protected]'
      }
    };
  },
  methods: {
    handleFormSubmit(submittedData) {
      console.log('Form submitted with data:', submittedData);
      // 这里可以进行进一步的处理，例如发请求
    }
  }
};
</script>

解释：

1. 子组件 (MyForm.vue)

   • 使用 props 接收从父组件传入的数据，并将这些数据与组件内部的 formData 进行绑定。
   • 通过 v-model 双向绑定输入框的值。
   • 提交表单时，触发自定义事件 formSubmit，并将 formData 数据通过 $emit 传递给父组件。

2. 父组件 (App.vue)

   • 通过 props 传递初始表单数据给子组件。
   • 使用 @formSubmit 监听子组件提交事件，接收到提交的数据后在控制台输出或进行其他处理操作。

这样，子组件中的表单提交事件会触发父组件的处理函数，你可以在父组件中对提交的数据进行进一步的处理（如发送 API 请求）。