这是一个创建于 3248 天前的主题，其中的信息可能已经有所发展或是发生改变。
<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