Vue.js 3.4.21版本组件与模型双向绑定配置失败求助

你的代码报错核心原因是根组件未声明firstName和lastName响应式数据。子组件的props确实定义了这两个属性，但v-model绑定的是父组件（此处即根组件）的数据，根组件里没有这两个变量，导致Vue渲染时提示属性未定义。

不需要用到Vue 3.4的defineModel，单HTML文件场景直接修改根组件即可解决，完整代码如下：

<div id="app">
    <test-component v-model:first-name="firstName" v-model:last-name="lastName"></test-component>
    <!-- 可添加预览，验证双向绑定效果 -->
    <p> firstName: {{ firstName }}</p>
    <p> lastName: {{ lastName }}</p>
</div>

<script>
Vue.createApp({
    // 根组件声明响应式数据
    data() {
        return {
            firstName: '',
            lastName: ''
        }
    },
    components: {
        'test-component': {
            props: {
                firstName: String,
                lastName: String
            },
            emits: ['update:firstName', 'update:lastName'],
            template: `
                <input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)"/>
                <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)"/>
            `
        }
    }
}).mount('#app');
</script>

关键改动说明 #

• 在根组件的data选项中添加firstName和lastName，初始值设为空字符串（匹配props的String类型定义）
• 子组件的props、emit和模板逻辑完全无需修改，这是Vue 3多v-model的标准写法，和单文件组件逻辑一致

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