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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 2920 天前的主题，其中的信息可能已经有所发展或是发生改变。

<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，那么直接就渲染为空了！

8 条回复 • 2016-11-25 11:23:58 +08:00

alp

2016-11-25 09:56:52 +08:00

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

ChefIsAwesome

2016-11-25 09:58:28 +08:00

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

viko16

2016-11-25 10:02:20 +08:00

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

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

ChenShao

2016-11-25 10:04:12 +08:00

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

ChenShao

2016-11-25 10:07:02 +08:00

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

viko16

2016-11-25 10:13:27 +08:00

@ChenShao

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

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

fanyer

2016-11-25 10:15:19 +08:00

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

jin5354

2016-11-25 11:23:58 +08:00

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