当前位置: 首页 > article >正文

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

http://www.kler.cn/a/584063.html

相关文章:

  • 项目组织管理类型-职能式组织和矩阵式组织的区别
  • 单机DeepSeek做PPT,YYDS!
  • 大语言模型的潜力是否被高估
  • C# 发送邮件 报错:此请求已被阻止,因为当用在 GET 请求中时,会将敏感信息透漏给第三方网站。
  • Denoising as Adaptation Noise-Space Domain Adaptation for Image Restoration
  • 【守护蓝色星球】《海洋环境保护法》的重要性与遵守主体
  • Redis三大件 穿透、雪崩、击穿
  • 如何自己做奶茶,从此告别奶茶店
  • Appium高级操作--ActionChains类、Toast元素识别、Hybrid App操作、手机系统API的操作
  • CSS-复合选择器、元素显示模式、背景
  • Java核心技术卷1
  • 得物 Android Crash 治理实践
  • 网关的详细介绍
  • 星越L_副驾驶屏使用讲解
  • 分布式训练中的 rank 和 local_rank
  • 已知含税金额和税率求不含税金额
  • ​【C++设计模式】第二十二篇:访问者模式(Visitor)
  • AI战略家:AI驱动的政府治理现代化:重构问题识别、决策与监督的范式
  • [Linux] Not enough free space to extract *.zip or file
  • DeepSeek与剪映短视频创作指南