当前位置: 首页 > news >正文

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)

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

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

相关文章:

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

如图所示控制台发现了爆红&#xff08;大哭&#xff09;&#xff1a; 报错解释&#xff1a; 当我们看到报错时&#xff0c;我们需要看到一些关键词&#xff0c;比如显眼的“component”和“name”这两个单词&#xff0c; 因此我们就从此处切入&#xff0c;大概与组件有关系。…...

计算机网络自顶向下Wireshark labs-HTTP

我直接翻译并在题目下面直接下我的答案了。 1.基本HTTP GET/response交互 我们开始探索HTTP&#xff0c;方法是下载一个非常简单的HTML文件 非常短&#xff0c;并且不包含嵌入的对象。执行以下操作&#xff1a; 启动您的浏览器。启动Wireshark数据包嗅探器&#xff0c;如Wir…...

解决pandas写入excel时的ValueError: All strings must be XML compatible报错

报错内容&#xff1a; ValueError: All strings must be XML compatible: Unicode or ASCII, no NULL bytes or control characters 报错背景 用pands批量写入excel文件&#xff0c;发生编码报错。检索了很多方案&#xff0c;都不能解决。 导致报错的原因是存在违法字符&…...

华为手表应用APP开发:watch系列 GT系列 1.配置调试设备

表开发:GT3(1)配置调试设备 初环境与设备获取手表UUID登录 AppGallery Connect 点击用户与访问初 希望能写一些简单的教程和案例分享给需要的人 鸿蒙可穿戴开发 支持外包开发:xkk9866@yeah.net 环境与设备 系统:window 设备:HUAWEI WATCH 3 Pro 开发工具:DevEco St…...

Vue(十九):ElementUI 扩展实现树形结构表格组件的勾父选子、半勾选、过滤出半勾选节点功能

效果 原理分析 从后端获取数据后,判断当前节点是否勾选,从而判断是否勾选子节点勾选当前节点时,子节点均勾选全勾选与半勾选与不勾选的样式处理全勾选和全取消勾选的逻辑筛选出半勾选的节点定义变量 import {computed, nextTick, reactive, ref} from vue; import {tree} f…...

SpringBoot RestTemplate 设置挡板

项目结构 代码 BaffleConfig /*** Description 记录配置信息* Author wjx* Date 2024/2/1 14:47**/ public interface BaffleConfig {// 是否开启挡板的开关public static boolean SWITCH true;// 文件根目录public static String ROOT_PATH "D:\\TIS\\mock";// …...

arcgis javascript api4.x加载非公开或者私有的arcgis地图服务

需求&#xff1a; 加载arcgis没有公开或者私有的地图服务&#xff0c;同时还想实现加载时不弹出登录窗口 提示&#xff1a;​ 下述是针对独立的arcgis server&#xff0c;没有portal的应用场景&#xff1b; 如果有portal可以参考链接&#xff1a;https://mp.weixin.qq.com/s/W…...

2024年美赛数学建模A题思路分析 - 资源可用性和性别比例

# 1 赛题 问题A&#xff1a;资源可用性和性别比例 虽然一些动物物种存在于通常的雄性或雌性性别之外&#xff0c;但大多数物种实质上是雄性或雌性。虽然许多物种在出生时的性别比例为1&#xff1a;1&#xff0c;但其他物种的性别比例并不均匀。这被称为适应性性别比例的变化。…...

UDP和TCP的区别和联系

传输层&#xff1a;定义传输数据的协议端口号&#xff0c;以及流控和差错校验。 协议有&#xff1a;TCP、UDP等 UDP和TCP的主要区别包括以下几个方面&#xff1a; 1、连接性与无连接性&#xff1a;TCP是面向连接的传输控制协议&#xff0c;而UDP提供无连接的数据报服务。这意…...

delete、truncate和drop区别

一、从执行速度上来说 drop > truncate >> DELETE 二、从原理上讲 1、DELETE DELETE from TABLE_NAME where xxx1.1、DELETE属于数据库DML操作语言&#xff0c;只删除数据不删除表的结构&#xff0c;会走事务&#xff0c;执行时会触发trigger&#xff08; 触发器…...

946. 验证栈序列

946. 验证栈序列 描述 : 给定 pushed 和 popped 两个序列&#xff0c;每个序列中的 值都不重复&#xff0c;只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时&#xff0c;返回 true&#xff1b;否则&#xff0c;返回 false 。 题目 : LeetCode 94…...

Linux系统管理和Shell脚本笔试题

1、写一个sed命令&#xff0c;修改/tmp/input.txt文件的内容&#xff0c;要求&#xff1a;(1) 删除所有空行&#xff1b;(2) 在非空行前面加一个"AAA"&#xff0c;在行尾加一个"BBB"&#xff0c;即将内容为11111的一行改为&#xff1a;AAA11111BBB #写入内…...

docker 搭建 Seafile 集成 onlyoffice

docker-compose一键部署yaml文件 version: "3"services:db:image: mariadb:10.11container_name: seafile-mysqlenvironment:- MYSQL_ROOT_PASSWORDdb_dev # Requested, set the roots password of MySQL service.- MYSQL_LOG_CONSOLEtruevolumes:- /share/ZFS18_D…...

【Spring Boot 3】【JPA】嵌入式对象

【Spring Boot 3】【JPA】嵌入式对象 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是要花费或…...

STM32控制DS18B20温度传感器获取温度

时间记录&#xff1a;2024/1/28 一、DS18B20温度传感器介绍 &#xff08;1&#xff09;测温范围-55℃~125℃&#xff0c;在-10℃到85℃范围内误差为0.4 &#xff08;2&#xff09;返回的温度数据为16位二进制数据 &#xff08;3&#xff09;STM32和DS18B20通信使用单总线协议…...

服务器常遇的响应状态码

服务器常遇的响应状态码 状态码 500 表示服务器内部错误。 这种状态码意味着服务器在尝试执行请求时遇到了意外情况。在处理这种状态码时&#xff0c;我们需要联系服务器管理员或服务提供商以获取更多信息。 处理方法&#xff1a;联系服务器管理员或服务提供商以获取更多信息…...

云原生业务全流程DevOps配置预研与实践

背景 我在一个二线城市&#xff08;山东济南&#xff09;&#xff0c;相对与北上广深杭这些IT业发达的城市来说&#xff0c;济南IT业对于业内新技术的接受度是有点慢的&#xff0c;国内很多一线大厂早先几年前就开始实践使用的技术&#xff0c;我们这边也是近两年才开始慢慢兴…...

SouthLeetCode-打卡24年01月第5周

SouthLeetCode-打卡24年01月第5周 // Date : 2024/01/39 ~ 2024/01/31 031.删除链表的倒数第 N 个结点 (1) 题目描述 031#LeetCode.19.#北岸计划2024/01/29 (2) 题解代码 Version1.0 class Solution {public ListNode removeNthFromEnd(ListNode head, int n) {if(head …...

【国产MCU】-CH32V307-通用DMA控制器及使用

通用DMA控制器及使用 文章目录 通用DMA控制器及使用1、通用DMA控制器介绍2、DMA驱动API介绍3、DMA使用实例直接存储器访问控制器(DMA)提供在外设和存储器之间或存储器和存储器之间的高速数据传输方式,无须CPU 干预,数据可以通过DMA 快速地移动,以节省CPU 的资源来做其他操…...

mysql8.0-cnf文件

一、my.cnf 文件 注意&#xff1a;根据自己环境进行参数的调整。 [client] port 3307 socket /data/mysql8.0.35/3307/tmp/mysql.sock[mysqldump] quick max_allowed_packet 64M[mysql] prompt"\u\h: \R:\m:\s [\d]> " no-auto-rehash[mysqld] ###### BASIC…...

Kandinsky-5.0-I2V-Lite-5s保姆级教程:从访问https://gpu-1pm4kagkou-7860.web.gpu.csdn.net/开始

Kandinsky-5.0-I2V-Lite-5s保姆级教程&#xff1a;从访问https://gpu-1pm4kagkou-7860.web.gpu.csdn.net/开始 1. 认识Kandinsky-5.0-I2V-Lite-5s Kandinsky-5.0-I2V-Lite-5s是一款轻量级的图生视频模型&#xff0c;它能将静态图片转化为动态视频。你只需要上传一张图片&…...

设备管理系统是什么?如何建立设备管理体系?

在现代企业的运转中&#xff0c;生产设备无疑是核心资产。无论是制造业的数控机床&#xff0c;还是建筑工地的重型机械&#xff0c;甚至是医疗机构的精密仪器&#xff0c;设备的稳定运行直接决定了企业的生产效率、产品质量和成本控制。然而&#xff0c;许多企业在设备管理上仍…...

别再为联合仿真头疼了!手把手教你用Amesim 2019和Matlab 2022b配置S-Function(Win10环境)

从零搭建Amesim与Matlab联合仿真环境&#xff1a;避坑指南与实战技巧 联合仿真技术已成为多物理场系统设计的黄金标准&#xff0c;但配置过程却让无数工程师在深夜的办公室里抓狂——编译器版本冲突、环境变量设置错误、接口编译失败&#xff0c;每一个环节都可能成为项目进度的…...

开源新形态:从代码到Prompt的转变

【导语&#xff1a;3月末&#xff0c;开源作者yetone发布新项目voice-input-src&#xff0c;以独特方式“开源”&#xff0c;即用自然语言Prompt生成代码&#xff0c;此做法引发讨论&#xff0c;或预示开源模式新转变。】AI驱动的语音输入法开源项目开源作者yetone在GitHub上发…...

Conda环境回滚实战:当安装新包搞崩base环境时如何一键恢复

Conda环境回滚实战&#xff1a;当安装新包搞崩base环境时如何一键恢复 在Python开发中&#xff0c;conda作为包管理和环境管理的利器&#xff0c;几乎成为数据科学家的标配工具。但越是频繁使用conda&#xff0c;越容易遇到一个令人头疼的问题——在base环境中安装新包后&#…...

Gitee:数字化转型浪潮中企业项目管理的战略级解决方案

在数字经济成为全球经济增长新引擎的背景下&#xff0c;企业数字化转型已从"选择题"变为"必答题"。项目管理工具作为数字化转型的基础设施&#xff0c;其重要性日益凸显。根据IDC最新预测&#xff0c;到2025年&#xff0c;中国数字经济规模将突破80万亿元&…...

从Markdown到可执行规范:Tessl Framework初探与“规范即源代码”的实践思考

从Markdown到可执行规范&#xff1a;Tessl Framework初探与“规范即源代码”的实践思考 当代码行数不再是衡量开发效率的唯一标准&#xff0c;一种全新的编程范式正在悄然兴起。想象一下&#xff0c;开发者不再需要直接编写实现细节&#xff0c;而是专注于用结构化的自然语言描…...

Doris集群部署避坑指南:3FE+3BE配置全流程(含Java环境配置与常见问题解决)

Doris集群部署实战&#xff1a;3FE3BE高可用架构搭建与深度调优 在企业级数据分析场景中&#xff0c;Doris凭借其出色的实时分析性能和高并发处理能力&#xff0c;已成为众多企业的首选OLAP引擎。本文将基于3FE&#xff08;Frontend&#xff09;3BE&#xff08;Backend&#xf…...

Ollama实测:Yi-Coder-1.5B代码生成速度有多快?3秒搞定日常函数

Ollama实测&#xff1a;Yi-Coder-1.5B代码生成速度有多快&#xff1f;3秒搞定日常函数 1. 测试背景与目标 作为一名开发者&#xff0c;每天都要面对各种编码任务。从简单的工具函数到复杂的算法实现&#xff0c;代码生成速度直接影响着开发效率。Yi-Coder-1.5B作为一款开源的…...

2024年DroidKaigi官方会议应用:Android DataStore轻量级数据存储终极指南

2024年DroidKaigi官方会议应用&#xff1a;Android DataStore轻量级数据存储终极指南 【免费下载链接】conference-app-2024 The Official Conference App for DroidKaigi 2024 项目地址: https://gitcode.com/GitHub_Trending/co/conference-app-2024 DroidKaigi 2024官…...