Nuxt3子组件SignForm向父组件emit邮箱值异常问题求助

问题根源 #

• v-model绑定错误：子组件中用字符串插值:v-model="${pf}"无法正确关联到响应式ref变量，输入值无法同步到email等ref中。
• 响应式变量缺失：子组件仅定义了email和password的ref，但未给confirm字段创建对应响应式变量，循环渲染的输入框无法动态绑定到目标变量。
• 事件命名与传参不规范：使用method作为emit事件名不够清晰，且仅传递单个字段值的方式灵活性不足。

修复后的代码 #

父组件 signup.vue

<script setup>
const signUp = (formData) => {
  console.log('注册信息:', formData);
  // 此处可调用用户注册接口
};
</script>

<template>
  <SignForm 
    :fields="['email', 'password', 'confirm']"
    header="Register a new account"
    :buttons="[{ text: 'Sign Up', color: 'green-500' }]"
    @sign-up="signUp"
  />
</template>

子组件 SignForm.vue

<script setup>
import { reactive } from 'vue';

// 定义组件props
const props = defineProps({
  fields: {
    type: Array,
    required: true
  },
  header: {
    type: String,
    required: true
  },
  buttons: {
    type: Array,
    required: true
  }
});

// 用reactive统一管理表单数据
const formData = reactive({});
// 初始化所有字段为空字符串
props.fields.forEach(field => {
  formData[field] = '';
});

// 声明emit事件
const emit = defineEmits(['sign-up']);

const handleSubmit = () => {
  // 提交时emit完整表单数据
  emit('sign-up', { ...formData });
};
</script>

<template>
  <div class="container">
    <form class="flex flex-col items-center gap-2" @submit.prevent="handleSubmit">
      <p class="text-2xl pb-2">{{ header }}</p>
      <input 
        v-for="(field, index) in fields" 
        :key="index"
        :type="field === 'confirm' ? 'password' : field"
        :placeholder="field"
        v-model="formData[field]"
        class="bg-gray-300 rounded p-2 w-2/5"
      >
      <button 
        type="submit" 
        v-for="(btn, index) in buttons" 
        :key="index"
        class="p-2 text-white rounded w-2/5 text-sm opacity-85 hover:font-bold hover:opacity-100"
        :class="`bg-${btn.color}`"
      >
        <span>{{ btn.text }}</span>
      </button>
    </form>    
  </div>
</template>

关键优化点 #

• 使用reactive创建统一的表单数据对象，循环渲染时通过formData[field]直接绑定v-model，确保输入值实时同步。
• 父组件拆分独立props传递，替代原包裹式传递方式，代码结构更清晰。
• 采用符合Vue规范的kebab-case事件名sign-up，提交时传递完整表单数据，提升父组件处理逻辑的灵活性。
• 监听表单submit事件而非按钮click事件，更贴合表单交互的标准流程。

内容的提问来源于stack exchange，提问作者Jay