Vue单文件组件，如何挂载多个？

【问题标题】：Vue Single File Components, how to mount multiple?Vue单文件组件，如何挂载多个？
【发布时间】：2020-07-01 19:33:14
【问题描述】：

有一个像这样的index.js 文件：

new Vue({
    el: '#app',
    components: {
        'hello': Hello,
        'counter': Counter,
        'goodbye': GoodBye
    }
});

还有一个像这样的index.html 文件：

<div id="app">
    <Counter />
    <Goodbye />
    <Hello />
</div>

仅呈现#app 中的第一项。

照原样，Counter 显示正常。如果我向上跳Goodbye 或Hello，它们也会完美呈现。

我显然希望所有这些都呈现。我做错了什么？

【问题讨论】：

【解决方案1】：

HTML 不支持用 /> 结束标签，因为标签没有关闭，所以它很糟糕。

这意味着您的结构在浏览器中如下所示（检查您禁用 javascript 的元素）：

<div id="app">
    <Counter>
        <Goodbye>
            <Hello>
            </Hello>
        </Goodbye>
    </Counter>
</div>

这当然行不通，我们需要将 index.html 更新为：

<div id="app">
    <Counter></Counter>
    <Goodbye></Goodbye>
    <Hello></Hello>
</div>

【讨论】：