社区论坛自助建站网呼伦贝尔做网站

前言

善用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>