Vue3全局JS环境下如何获取子组件ViewModel属性值并渲染？

问题场景 #

使用Vue3纯JS全局模式开发时，尝试在ID为r1的div元素中显示button-counter组件的计数器count值，但页面仅渲染出原始模板字符串{{ b1Counter.count }}，未被Vue解析处理。

问题原因 #

1. 模板不在Vue挂载范围：#r1元素位于Vue应用挂载的#app容器之外，Vue只会解析挂载容器内部的模板语法，对外部元素无处理能力。
2. 组件状态与数据流错误：
   • 原组件同时定义了count prop和内部count ref，局部ref会覆盖prop，违反Vue单向数据流规范。
   • 即便通过$refs获取到组件实例，外部元素不在Vue响应式系统管辖范围内，无法自动更新显示内容。

修改后的代码 #

button.html #

<!DOCTYPE html>
<html>
<head>
    <title>Button Counter</title>
    <script src="/js2/vue-global-min-3.3.4.js"></script>
    <script src="button.js"></script>
</head>
<body>
    <h1>Here are many child components!</h1>
    <div id="app">
        <button-counter id="b1" v-model:count="b1Count"></button-counter>
        <button-counter id="b2" v-model:count="b2Count"></button-counter>
        <button-counter id="b3" v-model:count="b3Count"></button-counter>
        
        <!-- 将展示区域移入Vue挂载容器内 -->
        <div id="r1">按钮1点击次数：{{ b1Count }}</div>
    </div>
</body>
</html>

button.js #

var initButton = function () {
    const ButtonCounter = {
        props: ['count'],
        emits: ['update:count'],
        template: `
            <button @click="$emit('update:count', count + 1)">
                You clicked me {{ count }} times.
            </button>
        `
    };

    function registerTag() {
        const app = Vue.createApp({
            setup() {
                // 父组件集中维护所有子组件的计数器状态
                const b1Count = Vue.ref(0);
                const b2Count = Vue.ref(0);
                const b3Count = Vue.ref(0);

                return { b1Count, b2Count, b3Count };
            }
        });
        app.component('button-counter', ButtonCounter);
        app.mount('#app');
    }

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

initButton();

关键修改说明 #

• 调整挂载范围：把#r1移入#app容器内，让Vue能够解析其模板语法并实现响应式更新。
• 规范数据流：子组件不再自行维护count状态，通过props接收父组件传递的值，点击时触发update:count事件通知父组件更新数据，严格遵循Vue单向数据流规则。
• 简化状态管理：父组件集中管理所有子组件的计数器状态，直接在模板中使用响应式变量展示数据，无需通过$refs访问子组件内部状态。
• 使用v-model语法糖：v-model:count等价于:count="b1Count" @update:count="b1Count = $event"，简化双向绑定的代码书写。

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