Nuxt 3中Element Plus自定义Input组件的v-model实现方案

我在Nuxt3中基于Element Plus搭建自定义Input组件时，遇到了v-model绑定失效的问题。参照Vue3的v-model规则编写了代码，但无法正常工作，以下是我的代码：

父组件代码 #

<template>
  <Input :modelValue="inputname" @update:modelValue="inputname=$event"/>
</template>
<script setup>
const inputname = ref("");
</script>

子组件代码 #

<template>
  <el-form-item prop="name">
    <el-input type="text" v-model="props.modelValue" @input="$emit('update:modelValue', $event)"/>
  </el-form-item>
</template>
<script setup>
defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: String,
    required: false,
    default: "",
  },
});
</script>

我需要一个简洁可靠的v-model实现方案，同时想知道是否必须用modelValue作为prop名称，还是可以自定义命名。

1. 修复子组件核心问题 #

你的代码失效原因是直接对只读的props使用v-model，Vue规定props不可直接修改。正确做法是在子组件内部声明本地变量，同步props值后再通过emit更新父组件状态：

修正后的子组件代码

<template>
  <el-form-item prop="name">
    <el-input type="text" v-model="localValue" @input="$emit('update:modelValue', localValue)"/>
  </el-form-item>
</template>
<script setup>
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: String,
    required: false,
    default: "",
  },
});

// 声明本地变量同步props初始值
const localValue = ref(props.modelValue);

// 监听props变化，同步到本地变量
watch(props, (newProps) => {
  localValue.value = newProps.modelValue;
}, { immediate: true });
</script>

2. 简化父组件写法 #

父组件无需手动拆解modelValue和update:modelValue，直接使用Vue3的v-model语法即可：

简化后的父组件代码

<template>
  <Input v-model="inputname" />
</template>
<script setup>
const inputname = ref("");
</script>

3. 自定义v-model的prop名称 #

不需要强制使用modelValue，可以自定义prop和对应的emit事件名称。比如将prop命名为username：

子组件（自定义prop）

<template>
  <el-form-item prop="name">
    <el-input type="text" v-model="localValue" @input="$emit('update:username', localValue)"/>
  </el-form-item>
</template>
<script setup>
const emit = defineEmits(["update:username"]);
const props = defineProps({
  username: {
    type: String,
    required: false,
    default: "",
  },
});

const localValue = ref(props.username);

watch(props, (newProps) => {
  localValue.value = newProps.username;
}, { immediate: true });
</script>

父组件调用（对应自定义prop）

<template>
  <Input v-model:username="inputname" />
</template>
<script setup>
const inputname = ref("");
</script>

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