Vue 3中首个自闭合组件之后添加的组件为何无法正常渲染

根因分析 #

• 该问题与Vue 2/3版本无关，核心是DOM内模板的解析规则限制：HTML原生规范仅支持<img>、<input>、<br>这类官方定义的空元素使用自闭合写法，自定义标签的自闭合写法不会被浏览器原生HTML解析器识别。
• 你在HTML页面内直接写的<counter :count="2" />会被浏览器解析为未闭合的开标签<counter :count="2">，后续所有DOM内容都会被识别为该组件的子节点，由于你定义的Counter组件没有预留<slot>插槽渲染子内容，因此后续的第三个counter组件、换行标签等内容全部不会被渲染。

解决方案 #

• DOM内模板（直接写在.html文件中挂载节点内的模板）中所有自定义组件必须使用完整闭合标签，将<counter :count="2" />修改为<counter :count="2"></counter>即可正常渲染所有组件。
• 如果你使用Vue单文件组件（.vue）、或组件内字符串模板（即组件选项中template属性定义的模板），则不受该限制，可正常使用自闭合自定义组件写法，因为这两类模板由Vue自身解析，不会经过浏览器原生HTML解析的预处理。

修正后代码示例 #

JS部分 #

let Counter = {
    props: {
        count: {
            type: Number,
            required: true 
        }
    },
    template: `
        <span>{{ count }}</span>
    `
}
const app = Vue.createApp({
    components: {
        'counter': Counter
    },
});

const vm = app.mount("#app");

HTML部分 #

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
    <counter :count="1"></counter>
    <br />
    <counter :count="2"></counter>
    <br />
    <counter :count="3"></counter>
</div>

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