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

Question

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

我需要在里面只有一个根元素<template>吗？

换句话说，这个模板代码在 Vue 2 中是否允许？

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

Answer 1

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

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

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

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

VueJS 文档

Answer 2

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

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

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

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

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

https://jsfiddle.net/woLwz98n/

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

Answer 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

Answer 4

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