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: {   //err
    SelectPrint
  },

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.mfbz.cn/a/366829.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

洛谷 B3635 硬币问题(DP入门)

[题目概述] 今有面值为 1、5、11 元的硬币各无限枚。 想要凑出 n 元&#xff0c;问需要的最少硬币数量。 输入格式 仅一行&#xff0c;一个正整数 n。 输出格式 仅一行&#xff0c;一个正整数&#xff0c;表示需要的硬币个数。 输入 15输出 3输入 12输出 2样例解释 …

深度学习入门笔记(二)神经元的结构

神经网络的基本单元是神经元&#xff0c;本节我们介绍神经元的结构。 2.1 神经元 一个神经元是由下面 5 部分组成的&#xff1a; 输入&#xff1a;x1,x2,…,xk。权重&#xff1a;w1,w2,…,wk。权重的个数与神经元输入的个数相同。偏移项&#xff1a;可省略。激活函数&#…

Hadoop:HDFS学习巩固——基础习题及编程实战

一 HDFS 选择题 1.对HDFS通信协议的理解错误的是&#xff1f; A.客户端与数据节点的交互是通过RPC&#xff08;Remote Procedure Call&#xff09;来实现的 B.HDFS通信协议都是构建在IoT协议基础之上的 C.名称节点和数据节点之间则使用数据节点协议进行交互 D.客户端通过一…

【Vue】指令之内容绑定,事件绑定

Vue指令[1] 内容绑定&#xff0c;事件绑定v-test指令v-html指令v-on基础 内容绑定&#xff0c;事件绑定 v-test指令 作用&#xff1a;设置标签的文本值&#xff08;textContent&#xff09; 默认写法会替换全部内容&#xff0c;使用差值表达式可以替换指定内容内部支持写表达…

Nicn的刷题日常之打印菱形

目录 1.题目描述 2.解题思路 3.解题 1.题目描述 用C语言在屏幕上输出以下图案&#xff1a; 2.解题思路 仔细观察图形&#xff0c;可以发现&#xff0c;此图形中是由空格和*按照不同个数的输出组成的。 上三角&#xff1a;先输出空格&#xff0c;后输出*&#xff0c;每…

谈谈BlueStore

目录 未完待续前言组成前期准备工作基础概念对象PextentextentBlobNode 线程事务磁盘的抽象与分配位图法分层位图 上电流程写流程读流程参考资料 未完待续 前言 BlueStore是什么&#xff1f; Ceph是一个统一的分布式存储系统。BlueStore是Ceph的存储引擎。 它的作用是什么&am…

C语言:内存函数(memcpy memmove memset memcmp使用)

和黛玉学编程呀------------- 后续更新的节奏就快啦 memcpy使用和模拟实现 使用 void * memcpy ( void * destination, const void * source, size_t num ) 1.函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 2.这个函数在遇到 \0 的时候…

深入理解网络编程之BIO和NIO

目录 原生JDK网络编程BIO BIO通信模型服务端代码 BIO通信模型客户端代码 伪异步模型服务端代码&#xff08;客户端跟之前一致&#xff09; 原生JDK网络编程NIO 什么是NIO&#xff1f; NIO和BIO的主要区别 阻塞与非阻塞IO NIO之Reactor模式 NIO中Reactor模式的基本组成…

【深度学习】基于PyTorch架构神经网络学习总结(基础概念基本网络搭建)

神经网络整体架构 类似于人体的神经元 神经网络工作原来为层次结构&#xff0c;一层一层的变换数据。如上述示例有4层&#xff0c;1层输入层、2层隐藏层、1层输出层神经元&#xff1a;数据的量或矩阵的大小&#xff0c;如上述示例中输入层中有三个神经元代表输入数据有3个特征…

国家博物馆逆向抢票协议

逆向工程的具体步骤可以因项目和目标系统的不同而有所变化。然而&#xff0c;以下是一般逆向工程的一般步骤&#xff1a; 1. 分析目标系统&#xff1a;对待逆向的系统进行调研和了解&#xff0c;包括其架构、功能、使用的技术等方面的信息。 2. 反汇编或反编译&#xff1a;使…

简单实践 java spring boot 自动配置模拟

1.概要 1.1 需求&#xff0c;自己写一个redis-spring-boot-starter模拟自动配置 自动配置就是在引入*-starter坐标后&#xff0c;可以已经spring框架的规则实现一些Bean的自动注入&#xff0c;并设置一些参数的默认值&#xff0c;且也可以在引入的工程中修改这些配置的值。这…

【算法】约数之和(数论)

题目 给定 n 个正整数 ai&#xff0c;请你输出这些数的乘积的约数之和&#xff0c;答案对 1097 取模。 输入格式 第一行包含整数 n。 接下来 n 行&#xff0c;每行包含一个整数 ai。 输出格式 输出一个整数&#xff0c;表示所给正整数的乘积的约数之和&#xff0c;答案需…

openssl3.2 - 官方demo学习 - pkcs12 - pkwrite.c

文章目录 openssl3.2 - 官方demo学习 - pkcs12 - pkwrite.c概述学到的知识点笔记PEM证书可以拼接实验 pkcs12 - pkwrite.c用win10的证书管理器安装P12证书是成功的END openssl3.2 - 官方demo学习 - pkcs12 - pkwrite.c 概述 openssl3.2 - 官方demo学习 - 索引贴 上次PKCS12的…

比瓴科技入围软件供应链安全赛道!为关键信息基础设施安全建设注入新动力

1月20日&#xff0c;中关村华安关键信息基础设施安全保护联盟会员大会暨关键信息基础设施安全保护论坛在北京成功举办&#xff0c;比瓴科技作为会员单位受邀出席。 本次论坛发布了《关键信息基础设施安全保护支撑能力白皮书&#xff08;2023&#xff09;》&#xff0c;比瓴科技…

智能分析网关V4+EasyCVR视频融合平台——高速公路交通情况的实时监控和分析一体化方案

随着2024年春运帷幕的拉开&#xff0c;不少人的返乡之旅也即将开启&#xff0c;从这几日的新闻来看&#xff0c;高速上一路飘红。伴随恶劣天气&#xff0c;加上激增的车流&#xff0c;极易导致高速瘫痪&#xff0c;无法正常使用。为解决此问题&#xff0c;助力高速高效运营&…

Cmake语法学习2:常用变量

目录 1.常用变量简介 1.1提供信息的变量 1.2改变行为的变量 1.3描述系统的变量 ​编辑1.4控制编译的变量 2.提供信息的变量 2.1PROJECT_SOURCE_DIR 和 PROJECT_BINARY_DIR 2.2 CMAKE_SOURCE_DIR 和 CMAKE_BINARY_DIR 2.3CMAKE_CURRENT_SOURCE_DIR 和CMAKE_CURRENT_BIN…

gRPC使用详解

起源特点主要优缺点应用场景组成部分使用方法SpringBoot集成gRPCVert.x集成gRPCNacos集成gRPC监控gRPC调用过程Java使用示例 起源 gRPC的起源可以追溯到2015年&#xff0c;当时谷歌发布了一款开源RPC框架&#xff0c;名为gRPC。gRPC的设计初衷是为了提供一种标准化、可通用和跨…

excel统计分析——卡方独立性检验(下)

参考资料&#xff1a;生物统计学 书接上文&#xff1a;https://blog.csdn.net/maizeman126/article/details/135893731 2、配对列联表 配对设计的数据&#xff0c;进行列联表检验时&#xff0c;采用McNemar-Bowker检验法进行检验。检验统计量为&#xff1a; 自由度dfk(k-1)/2…

CSS是一门需要单独学习的技术吗?

CSS (Cascading Style Sheets) &#xff0c;做前端开发的人都很清楚&#xff0c;因为这是他们的一项必不可少的技能。我以前也是知道CSS&#xff0c;但从来没有单独学习过&#xff0c;认为就它只是用来渲染网页的表现层效果&#xff0c;定制页面和内元素的布局、颜色和字体等&a…

python 蓝桥杯处理各种输入的数据

文章目录 空格间隔提取数字 空格间隔提取数字 对于以空格间隔的数字&#xff0c;由于输入的形式是字符串&#xff0c;那么就可以使用split 函数进行对输入的一个分隔&#xff0c;然后利用split 函数返回的是分隔之后的一个列表&#xff0c;再利用下标对于每一个部分进行相对应的…
最新文章