Vue.js使用多个defineModels报错‘duplicate model name "modelValue"’原因

问题原因 #

你连续调用了两次defineModel()，但默认情况下defineModel会使用modelValue作为模型名称，重复创建同名模型就会触发"duplicate model name 'modelValue'"的冲突错误。

注意：defineModel的核心用途是让组件对外暴露v-model双向绑定能力，如果只是组件内部的表单状态管理，完全不需要用它，直接用ref才是常规做法。

解决方案 #

方案1：改用本地状态（推荐，适合内部表单） #

如果这个登录表单只是组件内部使用，不需要父组件传递值，直接用ref定义本地表单状态即可：

<template>
  <h2>Login</h2>
  <form class="row mx-5" @submit.prevent="login">
    <div class="col-12 col-md-6 form-field">
      <label for="email" class="form-label">Correo</label>
      <input type="text" class="form-control" id="email" v-model="email" placeholder="Ingrese el correo">
    </div>
    <div class="col-12 col-md-6 form-field">
      <label for="password" class="form-label">Contraseña</label>
      <input type="text" class="form-control" id="password" v-model="password" placeholder="Ingrese la contraseña">
    </div>
    <div class="col-12">
      <button class="btn btn-primary">Login</button>
    </div>
  </form>
</template>

<script lang="ts" setup>
import { ref } from "vue";

// 用ref定义本地表单状态
const email = ref('');
const password = ref('');

const login = (e: Event) => {
  console.log(email.value, password.value);
};
</script>

方案2：为defineModel指定唯一模型名（适合组件对外多v-model） #

如果你确实需要让这个组件支持多个v-model绑定（比如父组件要同时传递email和password的值），可以给每个defineModel配置唯一的name参数：

<template>
  <h2>Login</h2>
  <form class="row mx-5" @submit.prevent="login">
    <div class="col-12 col-md-6 form-field">
      <label for="email" class="form-label">Correo</label>
      <input type="text" class="form-control" id="email" v-model="email" placeholder="Ingrese el correo">
    </div>
    <div class="col-12 col-md-6 form-field">
      <label for="password" class="form-label">Contraseña</label>
      <input type="text" class="form-control" id="password" v-model="password" placeholder="Ingrese la contraseña">
    </div>
    <div class="col-12">
      <button class="btn btn-primary">Login</button>
    </div>
  </form>
</template>

<script lang="ts" setup>
import { defineModel } from "vue";

// 为每个defineModel指定唯一的name
const email = defineModel({ name: 'email' });
const password = defineModel({ name: 'password' });

const login = (e: Event) => {
  console.log(email.value, password.value);
};
</script>

此时父组件使用该组件时，可通过多v-model传递值：

<LoginComponent v-model:email="parentEmail" v-model:password="parentPassword" />

总结 #

• 内部表单优先用ref管理状态，不要滥用defineModel；
• 组件需要多v-model时，给每个defineModel配置唯一name避免冲突。

内容的提问来源于stack exchange，提问作者William Pineda MHA