报错信息记录——Vue组件模板只能有一个根元素

Bertha 。 2023-07-04 08:38 7阅读 0赞

### 报错信息 ###

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.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]

### 报错分析 ###

编译模板错误。组件模板应该只包含一个根元素。

在一个组件模板中应该只存在一个根元素，所以在每个组件操作中都应该只有一个根元素。

const login = { 
            template: ` <h1>登录login组件</h1> <br/> <router-link to='/login/tab1'>Tab1</router-link> <router-link to='/login/tab2'>Tab2</router-link> <router-view/> `
          };

报错前的代码，在`template`属性中就存在了多个根元素，这样在Vue中是不允许的。

详细文档见：[组件基础-单个根元素][-]

### 解决方案 ###

可以将模板的内容全部包裹在一个父元素内，来修复这个问题。这样就只存在一个根元素了。

const login = { 
            template: ` <div> <h1>登录login组件</h1> <br/> <router-link to='/login/tab1'>Tab1</router-link> <router-link to='/login/tab2'>Tab2</router-link> <router-view/> </div> `
          };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200209150306628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70
[-]: https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E4%B8%AA%E6%A0%B9%E5%85%83%E7%B4%A0

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue基础-3.Vue 组件模板语法

前言 [我只介绍了常用的，更全的可以去看官网][Link 1] 基本语法当涉及到Vue组件模板语法时，有很多不同的概念和元素需要考虑。以下是一个更详细的Vue组

骑猪看日落/ 2024年03月24日 18:30/ 0 赞/ 151 阅读

相关 vue 组件根元素显示优化

![1190185-20190925215543982-499092233.png][] ![1190185-20190925220249463-95250339

你的名字/ 2023年08月17日 17:09/ 0 赞/ 127 阅读

相关报错信息记录——Vue组件模板只能有一个根元素

报错信息 Component template should contain exactly one root element. If you are using v-i

Bertha 。/ 2023年07月04日 08:38/ 0 赞/ 8 阅读

相关 vue集成Element组件--使用记录

一、安装及组装暂不考虑基础vue页面的组成： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

忘是亡心i/ 2022年12月15日 12:40/ 0 赞/ 242 阅读

相关 xml文档只能有一个顶层元素例如:

Document Type Definition (DTD ,文档类型定义) xml文档只能有一个顶层元素例如: <!--standalone="y

向右看齐/ 2022年08月06日 11:13/ 0 赞/ 180 阅读

相关 Vue组件模板注意事项

驼峰式命名时要注意的事项： <table> <tr> <my-component prop-a="My compone

港控/mmm°/ 2022年06月17日 02:44/ 0 赞/ 247 阅读

相关 vue常见报错记录

最近用vue，因为不熟练，所以总是踩了很多坑。这里记录一些我自己遇到过的报错问题，希望对大家有所帮助。 1：方法命名冲突，导致函数无法正常执行，页面报错如下图 ![Cent

左手的ㄟ右手/ 2022年06月09日 00:55/ 0 赞/ 337 阅读

相关 antd vue tree组件经验记录

目录 1. 默认全部展开 2.替换node名称 3.获取选中node的所有参数和key参数 4.node参数进行数据转换避坑 5.针对tree进行增删改查操作 6.

曾经终败给现在/ 2021年09月24日 12:26/ 0 赞/ 463 阅读

相关 Vue中的template标签【组件模板应该只包含一个根元素,有且只能有一个】

// 这里的template标签的根结构只能包含一个元素,可以是div,也可以是其他,但是只能是一个,否则编译会报错 <template> <

朴灿烈づ我的快乐病毒、/ 2021年08月28日 23:16/ 0 赞/ 889 阅读

相关 vscode快速生成vue组件模板

第一步文件 -----> 首选项 ------> 用户代码片段 -----> 输入vue ------>找到vue.json文件第二步讲下面代

野性酷女/ 2021年08月14日 02:04/ 0 赞/ 586 阅读