Vue组件视图模型注入错误排查：Uncaught TypeError问题

触发的错误Uncaught TypeError: Cannot read properties of undefined (reading 'count1')，核心原因是全局定义的vm未被注入Vue应用的上下文，同时代码还有其他几处逻辑错误，具体如下：

1. 全局vm未纳入Vue应用上下文 #

你在全局作用域定义了vm响应式对象，但Vue通过createApp({})创建的应用实例，默认只能访问自身上下文内的变量，模板里的{{ vm.count1.count }}无法找到全局的vm——因为Vue模板的渲染上下文是挂载的应用实例，不是全局window对象。

2. setup函数错误使用this #

Vue3的setup函数执行时，组件实例还未创建，this指向的是undefined，所以this.$emit会直接报错。正确的做法是从setup的第二个参数context中解构出emit方法。

3. 子组件props更新逻辑错误 #

• 传递的count是包含count属性的对象，但模板里写的{{ count }}会直接显示整个对象，应该写成{{ count.count }}；
• 增量逻辑里props.count + 1是把对象转成字符串后拼接数字，完全错误，应该取props.count.count做增量；
• 声明了emits: ['update:count']，但父组件没有用v-model绑定，而是直接传:count，即使emit了事件，父组件也不会更新vm里的数据。

修正后的核心代码示例： #

button.html 部分调整

<script>
const vm = Vue.reactive({
    count1: { count: 0 },
    count2: { count: 0 },
    count3: { count: 0 }
});

initButton(vm); // 把vm传递给初始化函数
</script>
<!-- 父组件使用v-model绑定 -->
<div id="app">
    <button-counter id="b1" v-model:count="vm.count1"></button-counter>
    <button-counter id="b2" v-model:count="vm.count2"></button-counter>
    <button-counter id="b3" v-model:count="vm.count3"></button-counter>
    <div id="r1">{{ vm.count1.count }}</div>
</div>

button.js 部分调整

var initButton = function (vm) {
    const ButtonCounter = {
        props: ['count'],
        emits: ['update:count'],
        template: `
            <button @click="incrementCount">
                You clicked me {{ count.count }} times.
            </button>
        `,
        setup (props, { emit }) { // 从context解构emit
            const incrementCount = () => {
                // 正确更新count对象的count属性
                emit('update:count', { ...props.count, count: props.count.count + 1 });
            };
            return { incrementCount };
        },
    };

    function registerTag () {
        // 把vm注入到根组件的data中，让模板可以访问
        const app = Vue.createApp({
            data() {
                return { vm }
            }
        });
        app.component('button-counter', ButtonCounter);
        app.mount('#app');
    }

    document.addEventListener('DOMContentLoaded', registerTag);
};

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