这是一个创建于 2915 天前的主题，其中的信息可能已经有所发展或是发生改变。
<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，那么直接就渲染为空了！
 |
1
alp 2016-11-25 09:56:52 +08:00
最外层只能有一个标签吧。你在外面加一个 div 试试
|
 |
2
ChefIsAwesome 2016-11-25 09:58:28 +08:00
组件肯定是个单独的封装好的东西。你想想如果你要设计一个封装好的 html 组件，它应该是什么样？
必然是 <MyComponent></MyComponent> 这样的形式。 不管是 vue 、 react ，还是什么其他的，它都肯定是设计成这样的形式。每个组件必须是套在一个 html 里的。 |
 |
3
viko16 2016-11-25 10:02:20 +08:00  1
是的，每个组件有且仅有一个根节点。
具体说明在这里，这个的确是 guide 文档没写好的地方 http://vuejs.org/v2/guide/migration.html#Fragment-Instances-removed |
 |
4
ChenShao OP @ChefIsAwesome 好吧，我承认我占牛角尖了。谢谢解答。
|
|
6
viko16 2016-11-25 10:13:27 +08:00
|
 |
7
fanyer 2016-11-25 10:15:19 +08:00
你非要这样写就用 vue2.0 之前的版本， 2.0 之后 vue 组件必须有且仅有一个最顶层祖先节点
|
 |
8
jin5354 2016-11-25 11:23:58 +08:00
你就记得在最外面裹个 div 就好了
|
Select Language