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 请求)。

相关推荐
雪碧聊技术19 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了21 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm2 小时前
Dioxus 与数据库协作
前端·rust