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,一经查实,立即删除!

相关文章

力扣(leetcode)第228题汇总区间(Python)

228.汇总区间 题目链接&#xff1a;228.汇总区间 给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说&#xff0c;nums 的每个元素都恰好被某个区间范围所覆盖&#xff0c;并且不存在属于某个范围但不属于 num…

vue + element 页面滚动计算百分比 + 节流函数

html&#xff1a; <el-progress :percentage"scrollValue"></el-progress> js&#xff1a; data() {return {scrollValue: 0,} }, mounted() {window.addEventListener(scroll, this.handleScroll) // 监听页面滚动 }, beforeDestroy() {window.remov…

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/

2023年06月CCF-GESP编程能力等级认证Python编程三级真题解析

Python等级认证GESP(1~6级)全部真题・点这里 一、单选题(共15题,共30分) 第1题 高级语言编写的程序需要经过以下( )操作,可以生成在计算机上运行的可执行代码。 A:编辑 B:保存 C:调试 D:编译 答案:D 第2题 二进制数 11.01 在十进制下是( )。 A:3.01 B:…

A系统数据表同步到B系统数据表

一、 事务操作 &#xff08;小量数据&#xff09; 事务操作通常用于确保数据的一致性和完整性。以下是一些常见的应用场景&#xff1a; 银行转账&#xff1a;当从一个账户向另一个账户转账时&#xff0c;需要确保两个操作&#xff08;从一个账户扣款和向另一个账户存款&#x…

标准的排序组合-算法

题目 有若干个字母&#xff0c;要求计算出长度为4的所有可能得组合 解题 排序组合最适用的就是回溯了&#xff0c;建议大家本地debug一层一层的看能好理解点 private static void getResult(List<String> source, Stack<String> temp, int curLength, int maxL…

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系列算法与缺陷检测的结合已经取…

malloc()函数、结构体、共用体、枚举 2月1日学习笔记

一、malloc&#xff08;&#xff09;函数 void* malloc(size_t size); 用于动态分配内存空间。 link (int*)malloc(size(int)); //申请一段为int大小的内存空间。 int* p (int*)malloc(sizeof(int)) 分配了一个 int 类型大小的内存空间&#xff0c;并将其起始地址赋给指针…

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;我们能够更灵活地进行数据…

golang sudog是什么?

sudog代表在等待队列中的goroutine&#xff0c;比如channel发送接受。由于goroutine和同步对象的关系是多对多&#xff0c;因此需要sudog映射 type sudog struct {// 指向的goroutineg *g// 指向前后sudog的指针next *sudogprev *sudog// 指向数据elem unsafe.Pointer // data…

【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…

SQL中聚合函数

SQL中的聚合函数是用于对一组值执行计算&#xff0c;并返回单个值的函数。它们通常在SELECT语句的SELECT列表中使用&#xff0c;并与GROUP BY子句结合使用来汇总数据。聚合函数忽略NULL值&#xff0c;只对非NULL值进行计算。以下是一些最常用的SQL聚合函数&#xff1a; 1. COU…