vue 子组件向父组件传form表单

在Vue中，子组件向父组件传递form表单的数据，可以通过自定义事件来实现。以下是一种常见的做法：

1. 在子组件中，当表单提交时，使用`this.$emit`方法触发一个自定义事件，并将表单数据作为参数传递给父组件。例如：

// 子组件
<template>
  <form @submit="submitForm">
    <!-- 表单内容 -->
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  methods: {
    submitForm(event) {
      event.preventDefault(); // 阻止表单默认提交行为
      const formData = {}; // 表单数据
      // 收集表单数据到formData对象中

      this.$emit('formSubmitted', formData); // 触发自定义事件并传递formData
    }
  }
}
</script>

2. 在父组件中，监听子组件触发的自定义事件，并在相应的事件处理函数中获取子组件传递的表单数据。例如：

// 父组件
<template>
  <div>
    <!-- 其他内容 -->
    <child-component @formSubmitted="handleFormSubmitted"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleFormSubmitted(formData) {
      // 处理从子组件传递过来的表单数据
      console.log(formData);
      // 其他逻辑操作
    }
  }
}
</script>

通过以上方式，子组件就可以将表单数据传递给父组件进行处理。父组件在监听到自定义事件后，可以执行相应的方法来处理表单数据。