前端学习笔记（三）——ant-design vue表单传递数据到父页面

前言

善用AI，快速解决定位

原理

a-form所在的SFC（单文件）vue中需要将表单数据传递给父页面SFC文件中，使用emit方法

代码

子组件（Form.vue）

<template>
  <a-form @submit="handleSubmit">
    <a-form-item label="用户名">
      <a-input v-model="formData.username" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input type="password" v-model="formData.password" />
    </a-form-item>
    <a-button type="primary" htmlType="submit">提交</a-button>
  </a-form>
</template>
 
<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.$emit('submit-form', this.formData); // 触发事件，并传递表单数据
    }
  }
}
</script>

父组件（Parent.vue）

<template>
  <div>
    <form-component @submit-form="onFormSubmit" />
  </div>
</template>
 
<script>
import FormComponent from './Form.vue';
 
export default {
  components: {
    FormComponent
  },
  methods: {
    onFormSubmit(formData) {
      console.log('表单数据已接收:', formData); // 处理表单数据
    }
  }
}
</script>