情境描述
今天使用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多个孙子。