组件嵌套时报: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.
在组件嵌套的过程中,报了一个错误:

这里报错的原因是:vue的组件(模板)只能有一个根节点,即.vue文件中的<template>标签下只能有一个子元素。
因此,建议大家在写.vue组件的时候,最好在<template>下添加一个标签(比如div),在这个标签里面写我们的组件。
例如:
<template>
<div>
<!--你的组件代码-->
</div>
</template>
我这边就是用这种方法解决的。也希望能帮助到大家。
组件嵌套时报: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.的更多相关文章
- 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 解决办法
Failed to compile. ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5992 ...
- 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.
在.vue文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one roo ...
- 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
背景: 在使用VUE添加标签的时候编译报错,报错如下: Component template should contain exactly one root element. If you are u ...
- vue父子组件嵌套的时候遇到 - Component template should contain exactly one root element. If you are using v-i
转自:https://blog.csdn.net/yangyiboshigou/article/details/72084619
- 【错误总结】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.
大致意思是因为模板里面应该包含一个根元素,使用组件的时候应该用div或p标签包起来
- 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.
运行代码时,一直报错: 经过查询后才知道,vue模板只能有一个跟对象 我是这样写的 最后修改为 就可以正常运行了
- vue-父子组件嵌套的示例
组件注册: // 注册组件 Vue.component('my-component', { template: '<div>A custom component!</div>' ...
- Vue出现Component template should ...
当运行vue出现错误Component template should contain exactly one root element. If you ...的时候,我们只需要将<templa ...
- Vue.js组件嵌套和template外用
Vue.extend组件的嵌套和template外用 组件嵌套分为全局组件嵌套和局部组件嵌套 组件嵌套需要将子元素写在父元素内 子组件必须在父组件中注册之后才能在父组件的模板中使用 全局组件嵌套 Vu ...
随机推荐
- .12-Vue源码之patch(2)
快完事咯! 简单看了下patch函数,虽然不长,但是实际上很长很长,慢慢来吧, 首先来个总览: // line-5250 // oldVnode => 原生DOM节点 // vnode => ...
- Eclipse 枚举类报错
当你写一个枚举类时,如果没有在枚举类的第一行写有哪些枚举值,那么就会出现编译报错:Syntax error on token "String", strictfp expected ...
- 使用Identity Server 4建立Authorization Server (2)
第一部分: http://www.cnblogs.com/cgzl/p/7780559.html 第一部分主要是建立了一个简单的Identity Server. 接下来继续: 建立Web Api项目 ...
- 机器学习数学|微积分梯度jensen不等式
机器学习中的数学 觉得有用的话,欢迎一起讨论相互学习~Follow Me 原创文章,如需转载请保留出处 本博客为七月在线邹博老师机器学习数学课程学习笔记 索引 微积分,梯度和Jensen不等式 Tay ...
- 70、django之Ajax初识
Ajax准么说是用于Javascript与服务器端进行交互的,我们之前呢没有了解ajax也同样可以完成与服务器的交互,那么ajax的优势在哪里?首先ajax是异步交互的也就是说我们基本不会遇到卡顿现象 ...
- tomcat不编译webapps下的war包的解决办法
1.首先看看tomcat是否能正常启动,如果启动tomcat一闪而过那么就使用dos命令启动tomcat看看报什么错 如果是端口占用的错误.使用netstat -ano命令查看占用端口的程序 然后用任 ...
- C#移位运算(左移和右移)
C#是用<<(左移) 和 >>(右移) 运算符是用来执行移位运算. 左移 (<<) 将第一个操作数向左移动第二个操作数指定的位数,空出的位置补0. 左移相当于乘. ...
- Linux的chattr与lsattr命令详解
Linux的chattr与lsattr命令详解 这两个命令是用来查看和改变文件.目录属性的,与chmod这个命令相比,chmod只是改变文件的读写.执行权限,更底层的属性控制是由chattr来改变的. ...
- 基于BroadReceiver实现获取短信内容
我朋友拜托我做一个能实现向指定号码发短信获取动态密码的一个小app,中间用到了基于监听系统通知的BroadReceiver 来实现获取有新短信并且获取新短信的内容.下面就是这个小app的实现监听部分的 ...
- 书写规范的javaScript
书写可维护的代码 代码的维护,修改以及扩展都是需要时间和人力成本的,所以为了减少浪费不必要的成本,从一开始就要书写可维护的代码,这样给自己也给项目其他人提供便利. 书写可维护的代码意味着你的代码是: ...