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>
    <div>
        <home-title></home-title>
        <flist-content></flist-content>
        <page></page>
    </div>
</template>

小结：

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

原文链接：https://blog.csdn.net/weixin_39553363/article/details/104151953