<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 Nov 25, 2016 最外层只能有一个标签吧。你在外面加一个 div 试试 |
 | 2 ChefIsAwesome Nov 25, 2016 组件肯定是个单独的封装好的东西。你想想如果你要设计一个封装好的 html 组件，它应该是什么样？ 必然是 <MyComponent></MyComponent> 这样的形式。 不管是 vue 、 react ，还是什么其他的，它都肯定是设计成这样的形式。每个组件必须是套在一个 html 里的。 |
 | 3 viko16 Nov 25, 2016  1 是的，每个组件有且仅有一个根节点。 具体说明在这里，这个的确是 guide 文档没写好的地方 http://vuejs.org/v2/guide/migration.html#Fragment-Instances-removed |
 | 4 ChenShao OP @ChefIsAwesome 好吧，我承认我占牛角尖了。谢谢解答。 |
 | 7 fanyer Nov 25, 2016 你非要这样写就用 vue2.0 之前的版本， 2.0 之后 vue 组件必须有且仅有一个最顶层祖先节点 |
 | 8 jin5354 Nov 25, 2016 你就记得在最外面裹个 div 就好了 |
Select Language