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

Question

我没有在docs中看到任何关于这个的东西,也许我没有足够的搜索,但组件模板似乎与root元素"更好"工作(更好的意思是:它在没有root元素的情况下运行Laravel elixir运行gulp但是运行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>

Answer 2

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

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

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

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

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

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