Vue 组件只能有一个根元素

Question

当我们兴致勃勃的建立好一个新的 VUE 项目并运行起来的时候，可能却并没有看到预期酷炫的页面，相反展现出来的是编译失败的错误提示：

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

那么很可能你组件中 html 的结构是类似于这样的：

<template>
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</template>

这就违背了 vue 中组件只能有一个根元素的原则，解决的方法也很简单，只要用一个父元素将这些内容包裹在一起就好了。

<template>
  <div>
    <h3>{{ title }}</h3>
    <div v-html="content"></div>
  </div> 
</template>