Unknown custom element:<xxx>-did you register the component correctly解决方案

如图所示控制台发现了爆红(大哭):

 报错解释:

当我们看到报错时,我们需要看到一些关键词,比如显眼的“component”和“name”这两个单词,

因此我们就从此处切入,大概与组件有关系。找到报错的页面:

 import SelectPrint from "@/components/selectPrint/index.vue";
export default {name: "",components: {SelectPrint},dicts: ["sales_attributes", "sheet_approve_flag", "sheet_source"],

本来开始看是感觉没有问题的,感觉好像本页面components 看写了几个,然后我页面往下滑动,突然发现,下面还有一个components。。。无语子哦。放在这么后面,是因为覆盖了。

只能有一个components

  name:'Details',components: {SelectPrint},dicts: ["sales_attributes", "sheet_approve_flag", "sheet_source"],data() {return {//此处很多定义的数据,下面的components没有注意到};},components: { Details, Personnel, PayCode,SelectPrint},

其他情况:

1.当然出现这个报错还可能是单词写错了,如:

components写错为component

  component: {   //errSelectPrint},

2.还有引入时需要检查下,就如下所示:

 import SelectPrint from "@/components/selectPrint/index.vue";import { SelectPrint } from "@/components/selectPrint/index.vue";

3 .就是看看vue文件里面的 components和name是否一样

就是页面两者不要出现相同的标识,就如id一样的,保持唯一性。

 import SelectPrint from "@/components/selectPrint/index.vue";
export default {name: "SelectPrint ",components: {SelectPrint},

3.1解决方式:

如果引入的组件和文件的name一样的话,是可以使用别名的,防止重复:

方式1:
import { SelectPrint as MySelectPrint } from "@/components/selectPrint/index.vue";
 方式2:
  components: {SelectPrint1: SelectPrint, // 使用别名// 其他组件...},

其他问题:(未解决)

我还有一次就故意把他们写一样的,然后就页面一进入(应该是初始化的时候)就卡死了,一直打不开,控制台无限加载下面图片这个警告,我知道这个是Chrome 增加了新的事件捕获机制-Passive Event Listeners,这个以前在搞地图是也遇到过,但是我也不是很清楚在只改了name和components的情况下会一直触发这个事件但是把他们改成不一样就好了

这个问题由于没有时间研究,看了下我就就暂时放在这了

[Violation]Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

 到后面就直接黑屏栈溢出了,应该是哪里有个死循环。

卡死问题可能不仅仅与这个组件的定义有关,还可能涉及到其他组件、数据、路由或其他一些上下文。以下是一些可能会导致页面卡死的情况:

  1. 无限循环或递归: 检查你的组件是否包含无限循环或递归,这可能会导致页面卡死。确保组件的生命周期钩子和渲染逻辑没有造成死循环。

  2. 数据加载问题: 如果组件依赖于异步数据加载,确保数据加载成功并且没有导致死锁或超时。使用浏览器开发者工具检查网络请求和响应。

  3. 其他组件问题: 页面中的其他组件也可能导致问题。尝试逐步排除其他组件,看看问题是否仍然存在。

 个人的部分思路:

后面我找到了引入的组件,发现组件又引入了四个组件,前面两个组件其实是一样的,调的组件内的同一个方法但是传入的参数不一样。

组件:<AddItemGoods ref="addItemGoods" @getItemList="getItemList" /><AddAcitiveGoods ref="AddAcitiveGoods" @getItemList="getGoodsItemData" /><AddStore ref="addStore" @getStoreList="getStoreList" /><ItemPriceTable ref="itemPrice2" @getItemList="getGoodsItemData" />引入:
import AddItemGoods from "../../components/selectGoodsDialog.vue";
import AddAcitiveGoods from "../../components/selectGoodsDialog.vue";
import AddStore from "../../components/addStore.vue";
import ItemPriceTable from "../../components/ItemPrice.vue";

难道是循环引用组件的问题?

循环调用组件时,组件比vue实例后创建,官方文档中是有提到了组件必须先于实例化引入的,所以引入搞成了懒加载,还是无用

components: {Details:()=>import ("@/components/Details/index.vue")},

为了让其在vue实例化前,直接全局引入了组件?(别人写的就不改了,不敢搞哦)

import xxx from 'xxx'Vue.component("xxx",xxx)

但是好像应该不是这个问题吧?我应该没有想在点子上吧

搞毛线,直接回家过年,项目能跑就行,以后再研究去了。不能一直浪费时间在天天研究这东西哦,有时间再搞。

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

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

相关文章

Spring Boot--07--@Repository 和@Mapper的区别

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.Repository的作用1.1 含义1.2 Repository与Service和Component有什么区别&#xff1f;1.3 使用场景单独使用Repository&#xff0c;需要配合使用MapperScannerCon…

深度学习的新前沿:突破、应用与挑战

引言 深度学习的快速发展已经在人工智能领域引起了革命性的变化。作为模仿人脑结构和功能的强大工具&#xff0c;深度神经网络在图像识别、自然语言处理、医学诊断等多个领域取得了显著成就。但是&#xff0c;随着技术的不断推进&#xff0c;深度学习也在不断地进化和扩展其能…

云上自动部署丨使用 Terraform 在 AWS 上搭建 DolphinDB

HashiCorp Terraform 是一款基础架构即代码工具&#xff0c;旨在实现 "Write, Plan, and Create Infrastructure as Code"。它通过配置文件来描述云资源的拓扑结构&#xff0c;包括虚拟机、存储账户和网络接口。Terraform 几乎支持市面上所有的云服务&#xff0c;能够…

一键部署FC超级马里奥web游戏

效果展示 安装 拉取镜像 #拉取镜像 docker pull stayhungrystayfoolish666/mario #创建并启动容器 docker run -d -p 10034:8080 --name maliao --restartalways stayhungrystayfoolish666/mario:latest 使用 浏览器打开 http://你的ip:10034/

C++ //练习 4.5 写出下列表达式的求值结果。

C Primer&#xff08;第5版&#xff09; 练习 4.5 练习 4.5 写出下列表达式的求值结果。 ( a ) -30 * 3 21 / 5 ( b ) -30 3 * 21 / 5 ( c ) 30 / 3 * 21 % 5 ( d ) -30 / 3 * 21 % 4 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;…

CSS实现文字大小自适应

遇到的问题&#xff1a; 在写页面的时候&#xff0c;兼容手机和PC页面&#xff0c;这样字体大小就需要根据页面的大小进行动态变化。 解决方法&#xff1a; clamp()函数 clamp() 函数的作用是把一个值限制在一个上限和下限区间&#xff0c;当这个值超过区间范围时&#xff0c;…

YOLO系列助力涨点!新SOTA让缺陷检测更准更快!附开源数据集下载

缺陷检测在工业自动化、质量控制、安全检测等多个实际应用中都有着广泛的需求。因此这个方向是相对容易发表高质量论文的&#xff0c;尤其是当研究涉及到创新的算法、改进的技术、新的应用场景或显著提高检测性能时。 在这其中&#xff0c;YOLO系列算法与缺陷检测的结合已经取…

composer常用命令

查看全局配置信息 composer config -gl 设置镜全局像地址 composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/ 去掉-g&#xff0c;即表示只有当前项目使用该镜像 批量安装composer项目依赖 composer install 执行该命令后&#xff0c;会读取当…

MySQL中where和having的区别

前言 数据库中的 WHERE 和 HAVING 子句在 SQL 查询中扮演着关键的角色&#xff0c;帮助我们有效地筛选和过滤数据。这两个子句虽然都用于限定结果集&#xff0c;但它们的应用场景和操作对象存在明显的区别。在理解和运用这两个子句的过程中&#xff0c;我们能够更灵活地进行数据…

【C语言】顺序表详解

目录 &#xff08;一&#xff09;顺序表是一种数据结构 &#xff08;二&#xff09;顺序表 &#xff08;1&#xff09;顺序表的必要性 &#xff08;2&#xff09;顺序表的概念及结构 i&#xff0c;线性表 &#xff08;3&#xff09;顺序表的分类 i&#xff0c;顺序表和…

Android SELinux:保护您的移动设备安全的关键

Android SELinux&#xff1a;保护您的移动设备安全的关键 1 引言 移动设备在我们的生活中扮演着越来越重要的角色&#xff0c;我们几乎把所有重要的信息都存储在这些设备上。然而&#xff0c;随着移动应用程序的数量不断增加&#xff0c;安全性也变得越来越关键。这就是为什么…

海洋鱼类检测7种YOLOV8NANO

【免费】海洋鱼类检测&#xff0c;7种类型&#xff0c;YOLOV8训练&#xff0c;转换成ONNX&#xff0c;OPENCV调用资源-CSDN文库 采用YOLOV8NANO训练模型&#xff0c;得到PT模型&#xff0c;然后转换成ONNX&#xff0c;供OPENCV的DNN调用&#xff0c;摆脱PYTORCH依赖&#xff0c…

算法设计与分析实验:最短路径算法

一、网络延迟时间 力扣第743题 本题采用最短路径的思想进行求解 1.1 具体思路 &#xff08;1&#xff09;使用邻接表表示有向图&#xff1a;首先&#xff0c;我们可以使用邻接表来表示有向图。邻接表是一种数据结构&#xff0c;用于表示图中顶点的相邻关系。在这个问题中&am…

轻松打造智能化性能测试监控平台:【JMeter+Grafana+Influxdb】的优化整合方案

在当前激烈的市场竞争中&#xff0c;创新和效率成为企业发展的核心要素之一。在这种背景下&#xff0c;如何保证产品和服务的稳定性、可靠性以及高效性就显得尤为重要。 而在软件开发过程中&#xff0c;性能测试是一项不可或缺的环节&#xff0c;它可以有效的评估一个系统、应…

C语言·贪吃蛇游戏(下)

上节我们将要完成贪吃蛇游戏所需的前置知识都学完了&#xff0c;那么这节我们就开始动手写代码了 1. 程序规划 首先我们应该规划好我们的代码文件&#xff0c;设置3个文件&#xff1a;snack.h 用来声明游戏中实现各种功能的函数&#xff0c;snack.c 用来实现函数&#xff0c;t…

探索Web3.0:下一代互联网的新篇章

随着技术的不断演进和社会的持续发展&#xff0c;我们正逐渐迈入Web3.0时代。Web3.0&#xff0c;作为下一代互联网的代名词&#xff0c;不仅仅是技术的进步&#xff0c;更是一种全新的数字化生态系统&#xff0c;其所带来的影响将深刻地改变着我们的生活、工作和交流方式。 什…

Java二维码图片识别

前言 后端识别二维码图片 代码 引入依赖 <dependency><groupId>com.google.zxing</groupId><artifactId>javase</artifactId><version>3.2.1</version></dependency><dependency><groupId>com.google.zxing<…

tuya-open-sdk-for-device使用体验之Windows 下 MSYS2 编译 T2-U 开发板

tuya-open-sdk-for-device 是一款跨芯片平台、操作系统的 IoT 开发框架。它基于通用南向接口设计&#xff0c;支持 Bluetooth、Wi-Fi、Ethernet 等通信协议&#xff0c;提供了物联网开发的核心功能&#xff0c;包括配网&#xff0c;激活&#xff0c;控制&#xff0c;升级等&…

2024美赛A题完整思路代码分析:建立竞争机理方程+遗传算法优化

A题是自由度比较大的场景限定下的模型构建&#xff0c;相对比较容易&#xff0c;核心是找到现有的成熟的数学模型&#xff0c;然后找到合适的数据进行证明得到结论&#xff0c;估计大部分是目标优化问题。&#xff08;不限制专业&#xff09; B题属于较为经典的物理建模&#…

【竞技宝】LOL:Able小炮连续起跳收割战场 OMG2-0轻取TT

北京时间2024年2月2日&#xff0c;英雄联盟LPL2024春季赛在昨天迎来第二周第四个比赛日&#xff0c;本日首场比赛由TT对阵OMG。本场比赛&#xff0c;TT在前中期和OMG有来有回&#xff0c;然而中后期的大龙团战始终不是OMG的对手&#xff0c;最终OMG2-0轻取TT。以下是本场比赛的…