vue3组件引用使用的坑

news2025/1/31 7:47:20

今天准备用el-tabs写个页面,发现点击后组件怎么都显示不了,后来才发现是组件引用的原因

 这是页面是显示的效果:

 乍一看确实是对的。。。

但是当我点击完这三个tab后再重新点击道路管理后,有意思的出现了:

 one组件消失不见了,不仅如此,另外两个组件也不显示了。。。

这里看见控制台报了一个这样的警告:

index.vue:34 [Vue warn]: Invalid vnode type when creating vnode: null. 
  at <ElTabPane label="道路管理" name="first" > 
  at <ElTabs modelValue="first" onUpdate:modelValue=fn class="demo-tabs"  ... > 
  at <MyComponent> 
  at <MyComponent$1689578690715 onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {$i18n: {…}, $t: ƒ, $rt: ƒ, …} > key="/road_network/index" > 
  at <KeepAlive key=0 include= [] > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade-transform" mode="out-in" > 
  at <RouterView> 
  at <ElCard class="base-content-box-noFooter hasHeight" > 
  at <ElMain> 
  at <ElContainer class="zq-right-box" > 
  at <ElContainer style= {height: '100vh'} class="zq-app-content-box" > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouterView> 
  at <ElConfigProvider locale= {name: 'zh-cn', el: Proxy(Object)} size="default" > 
  at <App>

网上查了一下是因为组件引用的时候要使用大驼峰命名

 后来该、改完了之后,页面就正常显示了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/763240.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

UE4/5AI制作基础AI(适合新手入门,运用黑板,行为树,ai控制器,角色类,任务)

目录 制作流程 第一步&#xff1a;创建资产 然后创建一个AIController 之后创建一个黑板和行为树&#xff1a; 第二步&#xff1a;制作 黑板 行为树 任务 运行行为树 结果 制作流程 第一步&#xff1a;创建资产 第一步直接复制你的人物蓝图&#xff0c;做一个npc&…

【网关】ShenYu Gateway入门Demo体验,ShenYu网关2.6.0直接调用Dubbo服务

本次为新开源框架接入ShenYu网关做基础学习指导&#xff0c;特地来下载官网的demo体验一把&#xff0c;具体是想通过网关泛化调用dubbo服务。本次使用的是最新版本2.6.0。 官网文档&#xff1a; 如何通过 Apache ShenYu 网关代理 Dubbo 服务 | Apache Dubbo 环境准备 第一步&a…

nvm安装和使用,对node.js版本进行切换控制

文章目录 前言一、nvm是什么&#xff1f;二、安装三、nvm命令说明nvm ls&#xff08;查看已安装版本&#xff09;nvm list available&#xff08;查看可下载安装的最新版本列表&#xff09;nvm current&#xff08;查看当前使用的版本&#xff09;nvm install&#xff08;下载安…

【Linux】网络基础之UDP协议

目录 &#x1f308;前言&#x1f338;1、传输层&#x1f33a;2、重谈端口号&#x1f368;2.1、端口号范围划分&#x1f367;2.2、认识知名端口号 &#x1f340;3、UDP协议&#x1f368;3.1、UDP协议报文结构&#x1f369;3.2、UDP协议的特点&#x1f36a;3.3、基于UDP的应用层协…

SQL篇-03_SQL必知必会-13_组合查询

SQL106 将两个 SELECT 语句结合起来&#xff08;一&#xff09; 描述 表OrderItems包含订单产品信息&#xff0c;字段prod_id代表产品id、quantity代表产品数量 prod_id quantity a0001 105 a0002 100 a0002 200 a0013 1121 a0003 10 a0003 19 a0003 5 BNBG 10002 【问题】将两…

移动卫生间有人无人自动采集方案

互联网和物联网技术的不断普及&#xff0c;以及新技术的不断更新迭代&#xff0c;为我们的生活带来了诸多便利和改变。在这个信息时代&#xff0c;我们希望通过采用更先进的技术来建设智慧厕所&#xff0c;以满足人们对卫生设施的高品质需求。其中&#xff0c;物联网技术、传感…

python和pip安装+flask基本用法小白教程

安装python 3.8.2&#xff1a; 直接点击下方链接下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/11Jo1I8GjnKQSgIv-5xSrTw 提取码&#xff1a;hg5h 安装pip&#xff1a; 在下载安装完python配置完环境变量后&#xff0c;打开cmd输入下面命令&#xff1a; pyt…

一文了解什么是ISO 9001认证,以及在静态分析和代码质量领域有哪些通过此认证的工具

ISO 9001是一个国际标准&#xff0c;被广泛应用于不同规模、不同类型的企业&#xff0c;它为企业的质量管理体系&#xff08;QMS&#xff09;提供了具体的要求和标准。 最新版本的ISO 9001发布于2015年&#xff0c;旨在帮助企业改善客户体验、满足法规要求、管理供应商和合作伙…

基于STM32设计的老人监护系统

一、设计需求 1.1 项目背景 21世纪以来,随着科技的发展,在人们的生活水平不断的提升的同时中国老龄化人口问题日益严重,再加上社会经济的发展。许多子女外出打工,使得越来越多的空巢老人得不到及时有效的关心与治疗。因此,本系统以老人为中心,并设定出许多相关的功能监…

Java 并发编程

一、开篇 本篇只要是对Java基础中的并发编程进行巩固、知识回顾。 几乎所有的资料在讲述本篇时都是先讲一下进程和线程的区别。在此将不详细介绍&#xff0c;只介绍了解以下几点区别&#xff1a; 1、进程大、线程小&#xff0c;一个程序至少有一个进程&#xff0c;一个进程至…

原型模式-克隆一个对象

在开发一个界面的时候&#xff0c;里面有多个Button&#xff0c;这些对象的属性内容相似。如果一个个实例化Button对象&#xff0c;并设置其属性&#xff0c;那么代码量将会增多。 通过一个原型对象克隆出多个一模一样的对象&#xff0c;该模式被称为原型模式。 图 原型模式 …

Vue-Router相关理解3

路由跳转的replace方法 编程式路由导航&#xff08;不用<router-link></router-link>&#xff09; src/components/Banner.vue <template><div class"col-xs-offset-2 col-xs-8"><div class"page-header"><h2>Vue R…

Nginx配置白名单访问

一、背景 在项目运行的时候&#xff0c;需要设置特定的访问权限&#xff0c;以拒绝其他可能存在的恶意访问。 二、配置 2.1、关键字 允许访问关键字&#xff1a;allow 屏蔽访问关键字&#xff1a;deny 2.2、作用域 作用域如下&#xff1a; http&#xff1a;所有网站屏蔽I…

MATLAB算法-数据挖掘算法详解,

Matlab是一种功能强大的数据分析和数据挖掘工具,提供了丰富的数据挖掘算法和函数。下面将介绍一些最著名的数据挖掘算法,并提供相应的代码示例。 K均值聚类算法(K-means Clustering): K均值聚类是一种常用的无监督学习算法,用于将数据集划分为K个不同的簇。以下是在Matla…

ElasticSearch学习(1) 基础操作

目前使用的ES版本是7&#xff0c;借用下其他的文档。说明下ES的存储。 ES首先是index 对应的是数据库&#xff0c;7以前有type的概念&#xff0c;7没有type的概念&#xff0c;也就是说现在ES7 一个库(index)只有一个表(type)。 一个表(type)可以有多行(doc) 一行(doc)有多列…

上手vue2的学习笔记4之搭建vue环境

一、安装node环境 上手vue2的学习笔记2之安装nodejs和npm的踩坑经历 node -v //查看是否安装成功 npm -v //查看npm是否安装成功二、搭建vue项目环境 参考链接1&#xff1a;vue(2.0版本)安装步骤教程 参考链接2: MacOS 搭建一个vue项目(完整步骤) 1、安装vue2 npm install …

驱动程序设计 平台驱动、Linux内存映射、Linux中断、按键中断控制 7.13

平台驱动 模块驱动&#xff1a; 一对多管理&#xff0c;系统管理效率低 加载卸载方便 设备模型&#xff1a;分层分级的管理4个重要的组成部分&#xff1a;class device driver bus&#xff08;总线&#xff09;层级&#xff1a;kobj-->kset/kobj-->kset-->kset class…

资产管理简单实用技巧,让你告别加班!

资产管理系统在现代商业环境中扮演着关键的角色。随着企业资产规模的不断扩大和多样化&#xff0c;有效地管理和跟踪资产变得至关重要。 随着企业竞争的加剧和资产管理的重要性日益凸显&#xff0c;资产管理系统将继续在各行各业中发挥着不可或缺的作用。无论是生产设备、办公设…

BottomSheetDialog无法设置圆角的解决问题

1、设置background为透明 <style name"BottomSheetDialog" parent"Theme.Design.Light.BottomSheetDialog"><item name"bottomSheetStyle">style/bottomSheetStyleWrapper</item></style><style name"bottomShe…

Redis的缓存问题

说起Redis的缓存&#xff0c;我们知道前端发出的请求到后端&#xff0c;后端先从Redis中查询&#xff0c;如果查询到了则直接返回&#xff0c;如果Redis中未查询到&#xff0c;就去数据库中查询&#xff0c;如果数据库中存在&#xff0c;则返回结果并且更新到Redis缓存当中&…