前端学习笔记(三)——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>