代码之家 › 专栏 › 技术社区 › Frankie

Vue单文件组件,如何挂载多个?

vue-component vue.js

1

Frankie · 技术社区 · 6 年前

有一个 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 回复 | 直到 6 年前

1

2

Ferrybig 6 年前

HTML不支持使用/>关闭标记,因为标记未关闭。

这意味着浏览器的结构如下所示(在禁用javascript的情况下检查元素):

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

这当然不行,我们需要将index.html更新为:

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