组件嵌套时报: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),在这个标签里面写我们的组件。

例如:

1 <template>
2     <div>
3         <!--你的组件代码-->
4     </div>
5 </template>    

我这边就是用这种方法解决的。也希望能帮助到大家。

时间: 2024-10-07 18:35:33

组件嵌套时报: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.的相关文章

- 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. 解决方案

<template> <div>{{hello}}</div> <button @click="addOne">add one</button> <button @click="minusOne">minus one</button> </template> 在*.vue组件里有这么一段. 报错信息: (Emitted value instead of an instan

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 root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.[翻译:组件模板应该只包含一个根元素. 如果您在多个元素上使用v-if,请使用v-else-if来代替它们.] 报错文

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菜鸟一枚,下载github上的代码来框架和思路,添加自己新的代码调试的时候,发现了一个错误,,具体报错如: error in ./src/components/page/Test.vue (Emitted value instead of an instance of Error) Vue template syntax error: Component template should contain exactly one root element. If you are using v

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的模板中只能有一个根节点,所以在<template>中尝试插入第二个元素时就会报这个错. 例如: HTML: <template> <p>{{msg}}</p> <p>{{msg}}</p> </template> 结果: 解决办法: 将<template>中的元素用一个<div>包裹起来即可.

Delphi之创建组件模板(Component Template)

[tip] 组件模板(Component Template)是指修改后保存下来供以后再使用的一个或一组组件. [/tip] 组件模板可用来创建.保存和重复使用组件组.实际上,组件模板不必是一组组件,完全可以是单个组件.举一个小例子对理解组件模板的用途会很有帮助,但先要简要介绍一下Windows编辑控件(edit control). 与所有的Windows控件一样,标准Windows单行编辑控件有若干预定义动作.其中一个动作与Enter键的处理方式有关.如果当光标在编辑框控件上时用户按下Enter

vue-父子组件嵌套的示例

组件注册: // 注册组件 Vue.component('my-component', { template: '<div>A custom component!</div>' }) 注册局部组件 var childComponent = Vue.extend({ template: '<p>this is child template</p>' }); Vue.component("parent",{ template: '<di

vue组件大集合 component

vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template:''  组件要显示的内容 component('',);  注册组件,接收两个参数,第一个参数用来使用的标签,第二个参数标识要显示内容的构建器 详情请看vue的API: http://v1-cn.vuejs.org/guide/components.html 一.简单的组件 1 <!DOCTYPE

vue02----什么是组件、组件创建、全局组件、局部组件、组件嵌套、组件传值、为什么组件中的data不是一个对象而是一个函数

### 什么是组件? 将代码进行复用 组件是实例的拓展子类 组件继承自实例,实例有的组件大部分都有,稍有变异 ### 组件创建 创建组件模板的2种方式: 1.通过template标签     template:"#tpl" 2.通过字符串模板   template:"<h1>吴启浪</h1>" ### 全局组件 所有的实例都可以使用 Vue.component("wql",{ template:"<h1&g

React入门---组件嵌套-5

组件嵌套 我们现在需要组件嵌套,所以要创建其他组件,目前有一个头部组件,在./components/header.js; 接下来在components文件中创建:底部组件footer.js 和主体组件BodyIndex.js 项目框架应该为: 底部组件footer.js 和主体组件BodyIndex.js代码编译: 1. header.js (之前有编译过) import React from 'react'; import ReactDOM from 'react-dom'; //创建一个类