Vue传递值并提交

  1. 封装好的子组件 (MyForm.vue)
html 复制代码
<template>
  <form @submit.prevent="handleSubmit">
    <label for="name">Name:</label>
    <input type="text" v-model="formData.name" />

    <label for="email">Email:</label>
    <input type="email" v-model="formData.email" />

    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  props: {
    initialData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      formData: {
        name: this.initialData.name || '',
        email: this.initialData.email || ''
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$emit('formSubmit', this.formData);  // 向父组件提交数据
    }
  }
};
</script>
  1. 父组件 (App.vue)
html 复制代码
<template>
  <div>
    <h1>Parent Component</h1>
    <MyForm :initialData="formData" @formSubmit="handleFormSubmit" />
  </div>
</template>

<script>
import MyForm from './components/MyForm.vue';

export default {
  components: {
    MyForm
  },
  data() {
    return {
      formData: {
        name: 'John Doe',
        email: 'john.doe@example.com'
      }
    };
  },
  methods: {
    handleFormSubmit(submittedData) {
      console.log('Form submitted with data:', submittedData);
      // 这里可以进行进一步的处理,例如发请求
    }
  }
};
</script>

解释:

  1. 子组件 (MyForm.vue)

    • 使用 props 接收从父组件传入的数据,并将这些数据与组件内部的 formData 进行绑定。
    • 通过 v-model 双向绑定输入框的值。
    • 提交表单时,触发自定义事件 formSubmit,并将 formData 数据通过 $emit 传递给父组件。
  2. 父组件 (App.vue)

    • 通过 props 传递初始表单数据给子组件。
    • 使用 @formSubmit 监听子组件提交事件,接收到提交的数据后在控制台输出或进行其他处理操作。

这样,子组件中的表单提交事件会触发父组件的处理函数,你可以在父组件中对提交的数据进行进一步的处理(如发送 API 请求)。

相关推荐
轻语呢喃15 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军16 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子19 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游19 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子20 分钟前
智能前端实践之 shot-word demo
前端
归于尽21 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810121 分钟前
vite 插件
前端
无数山23 分钟前
autorelease pool
前端
支撑前端荣耀24 分钟前
四、Cypress测试框架拆解
前端
杨进军24 分钟前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架