Question

我在docs中没有看到任何相关内容，也许我搜索得不够，但组件模板似乎与root元素“更好”（更好的意思是：它在没有root元素的情况下运行Laravel elixir运行{{1}但是运行gulp只显示第一个元素）。

我需要在gulp --production内只有一个根元素吗？

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

<template>

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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

我也会借此机会感谢你的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。