一个 Vuejs 组件模板只需要 root 一个元素吗？

Question

我在文档中没有看到任何关于此的信息，也许我没有搜索足够，但是组件模板似乎可以使用 "better" 根元素（更好的意思是：它可以在没有根元素的情况下使用 Laravel elixir 运行 gulp 但运行 gulp --production 仅显示第一个元素）。

我是否需要在 <template> 中只有一个根元素？

换句话说，Vue 2 允许使用此模板代码吗？

<template>
  <div>A</div>
  <div>B</div>
</template>

Answer 1

它可以编译，但 Vue 会抛出以下警告：

[Vue warn]: Component template should contain exactly one root element:

并且只显示模板中的第一个元素，因此您必须确保将模板包装在一个根级标记中，如下所示：

<template>
  <div>
    <div>A</div>
    <div>B</div>
  </div>
</template>

如果您查看以下 JSFiddle 上的开发人员工具控制台，您应该明白我的意思：

https://jsfiddle.net/woLwz98n/

我也会借此机会感谢你的laravel-log-viewer，我一直在使用它，它非常棒！

Answer 2

每个组件必须只有一个根元素。不再允许片段实例。如果您有这样的模板：

<p>foo</p>
<p>bar</p>

建议将所有内容简单地包装在一个新元素中，如下所示：

<div>
  <p>foo</p>
  <p>bar</p>
</div>

VueJS Docs

Answer 3

是的，Vue 2.0 模板需要具有单个根元素。只需创建一个父项 div 并将所有组件 div 放入其中。

<template>
  <div>
    <div>A</div>
    <div>B</div>
  </div>
</template>

Vue.js 创作者在此 post:
中提到了同样的内容 https://github.com/vuejs/vue-loader/issues/384

Answer 4

除了所提供的答案之外，我想我只需加上我的两分钱，因为它可能会对其他人有所帮助。我有一个 child 组件（table 行），我一直在 table 行周围包裹 div 尝试上面提出的解决方案 - 但后来我意识到 parent 组件是需要包装的部分，而不是 child 并且问题已解决。因此，如果您在 parent / child 组件情况下遇到此错误 - 在 parent 模板代码周围包装一个 div。

一个 Vuejs 组件模板只需要 root 一个元素吗？

Does a Vuejs component template need only root one element?

gulp

vue.js

laravel-elixir

vuejs2