Component template should contain exactly one root element. If you are using v-if on multiple eleme

情境描述

今天使用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.

到百度翻译成中文的意思是

组件模板应正好包含一个根元素。如果在多个元素上使用v-If，请改用v-else-If来链接它们。

错误发生原因

每一个vue文件就是vue组件，在vue组件当中，有一条规定，就是，template标签只能有一个儿子，不能有多个儿子，也就是说，以下的写法是错误的。

<template>  
	   <home-title></home-title>
	   <flist-content></flist-content>
	   <page></page>
</template>

正确的是，我们应该使用一个大盒子将这三个组件都包裹起来，这里的大盒子，我使用div元素来描述。

小结：

记住，template只能有一个儿子，但是，template可以有n多个孙子。