Vuejs 组件模板是否只需要根一个元素？答案

【问题标题】：Does a Vuejs component template need only root one element?Vuejs 组件模板是否只需要根一个元素？
【发布时间】：2017-03-18 01:47:04
【问题描述】：

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

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

也就是说，这个模板代码在 Vue 2 中是否允许？

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

【问题讨论】：

标签： gulp vue.js laravel-elixir vuejs2

【解决方案1】：

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

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

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

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

VueJS Docs

【讨论】：

【解决方案2】：

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

[Vue 警告]：组件模板应该只包含一个根元素：

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

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

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

https://jsfiddle.net/woLwz98n/

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

【讨论】：

【解决方案3】：

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

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

Vue.js 的创建者在这篇文章中提到了相同的内容：
https://github.com/vuejs/vue-loader/issues/384

【讨论】：

【解决方案4】：

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

【讨论】：