Nuxt中自定义组件v-model双向绑定失效问题如何解决

快速验证方法 #

你可以先做两个小改动测试绑定是否恢复：

• 把index.vue里的v-model.trim="cashier_name"改成v-model="cashier_name"，去掉修饰符
• 在Input.vue的script选项中添加emits: ['update:modelValue']显式声明自定义事件

如果修改后绑定生效，说明问题出在以下两个核心点： #

核心问题说明 #

1. 未声明自定义事件（Nuxt3/Vue3场景）
   Vue 3 要求组件触发的自定义事件必须在emits选项中显式注册，未注册的事件不会被父组件识别，会直接导致绑定失效。
2. 未手动处理v-model.trim修饰符
   自定义组件上的v-model修饰符无法直接复用原生input的处理逻辑，需要手动接收修饰符状态，在emit值之前先做对应处理才能生效。
3. 版本兼容问题（Nuxt2/Vue2场景）
   如果你使用的是Nuxt2（基于Vue2），Vue2的默认v-model绑定规则是prop为value、事件为input，而非Vue3的modelValue+update:modelValue，规则不匹配自然无法生效。

完整修复代码 #

适配Nuxt3/Vue3 #

Input.vue

<template>
    <input :value="modelValue" @input="handleInput" class="input" type="text" :placeholder="placeholder">   
</template>

<script>
export default {
    props:{
        modelValue:String,
        placeholder: String,
        // 接收v-model的修饰符，默认是空对象
        modelModifiers: {
            default: () => ({})
        }
    },
    // 显式声明要触发的事件
    emits: ['update:modelValue'],
    methods: {
        handleInput(e) {
            let value = e.target.value
            // 存在trim修饰符时先处理再触发更新
            if (this.modelModifiers.trim) {
                value = value.trim()
            }
            this.$emit('update:modelValue', value)
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/_shared.scss';

.input{
    padding: 10px 15px;
    background: white;
    border: 1px solid #cecece;
    border-radius: 4px;
}
</style>

index.vue无需调整，保持原有逻辑即可。

适配Nuxt2/Vue2 #

Input.vue

<template>
    <input :value="value" @input.trim="handleInput" class="input" type="text" :placeholder="placeholder">   
</template>

<script>
export default {
    props:{
        value:String,
        placeholder: String
    },
    methods: {
        handleInput(e) {
            this.$emit('input', e.target.value)
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/_shared.scss';

.input{
    padding: 10px 15px;
    background: white;
    border: 1px solid #cecece;
    border-radius: 4px;
}
</style>

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