Question

我创建了两个自定义VueJS组件，我想将它们放在一起，就像这样：

<div id="app">
      <x-component />   
      <y-component />
</div>

...
new Vue({
    el: '#app',
    components: {
        'x-component': { template: '<div>component x</div>' },
        'y-component': { template: '<div>component y</div>' }
    }
});

当我这样做时，只渲染第一个组件。这是VueJS中的错误还是我做错了什么？看起来这应该是可能的。

当我按如下方式更改时，它可以工作：

<div id="app">
      <div>
        <x-component />   
      </div>
      <div>
        <y-component />
      </div>
</div>

以下复制品：

不工作： https://jsfiddle.net/mquqonuq/1/

工作： https://jsfiddle.net/mquqonuq/2/

Answer 1

如果它是一个html规范问题我现在无法记住，但自定义网络元素需要是一个双标签封闭系统，而不是一个自闭的单个元素。

尝试：

<div id="app">
    <x-component></x-component>
    <y-component></y-component>
</div>

哪个有效。

编辑：如果你看一下谷歌的web components primer列表

3. Custom elements cannot be self-closing because HTML only allows a few elements to be self-closing. Always write a closing tag (<app-drawer></app-drawer>).

是否可以渲染两个相邻的VueJS组件？

1 个答案: