vue 模板内容有且只有 1 个顶层 html 标签？

[ChenShao]

<div id="app">
	<my-component></my-component>
</div>

Vue.component('my-component',
{
    template: '<div>AAAAA</div><div>BBBBB</div>'
});
var vm = new Vue({
    el: '#app',
});

Vue 版本： 2.1.3

问：

为什么页面只渲染了<div>AAAAA</div>？ <div>BBBBB</div>哪去了？

假如模板是：CCCCC<div>AAAAA</div>DDDDD，也只渲染出<div>AAAAA</div>？ 如果模板没有标签包围：AAAAA，那么直接就渲染为空了！

[alp]

最外层只能有一个标签吧。你在外面加一个 div 试试

[ChefIsAwesome]

组件肯定是个单独的封装好的东西。你想想如果你要设计一个封装好的 html 组件，它应该是什么样？
必然是 <MyComponent></MyComponent> 这样的形式。
不管是 vue 、 react ，还是什么其他的，它都肯定是设计成这样的形式。每个组件必须是套在一个 html 里的。

[viko16]

是的，每个组件有且仅有一个根节点。

具体说明在这里，这个的确是 guide 文档没写好的地方
http://vuejs.org/v2/guide/migration.html#Fragment-Instances-removed

[ChenShao]

@ChefIsAwesome 好吧，我承认我占牛角尖了。谢谢解答。

[ChenShao]

@viko16 还真的有文档说明。只是这段话出现在官网文档这个地方，真不怪我不认真，我是从 2.0 开始学的。

[viko16]

@ChenShao

新文档的确是没提及，我也是按老文档内容搜索到的

要不去 vuejs/vuejs.org 提个 issue / PR 吧，方便其他人

[fanyer]

你非要这样写就用 vue2.0 之前的版本， 2.0 之后 vue 组件必须有且仅有一个最顶层祖先节点

[jin5354]

你就记得在最外面裹个 div 就好了