西安h5建站,杭州建网站的公司,网站管理助手数据库,西安比较好的软件公司如图所示控制台发现了爆红#xff08;大哭#xff09;#xff1a; 报错解释#xff1a;
当我们看到报错时#xff0c;我们需要看到一些关键词#xff0c;比如显眼的“component”和“name”这两个单词#xff0c;
因此我们就从此处切入#xff0c;大概与组件有关系。…如图所示控制台发现了爆红大哭 报错解释
当我们看到报错时我们需要看到一些关键词比如显眼的“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. 到后面就直接黑屏栈溢出了应该是哪里有个死循环。 卡死问题可能不仅仅与这个组件的定义有关还可能涉及到其他组件、数据、路由或其他一些上下文。以下是一些可能会导致页面卡死的情况 无限循环或递归 检查你的组件是否包含无限循环或递归这可能会导致页面卡死。确保组件的生命周期钩子和渲染逻辑没有造成死循环。 数据加载问题 如果组件依赖于异步数据加载确保数据加载成功并且没有导致死锁或超时。使用浏览器开发者工具检查网络请求和响应。 其他组件问题 页面中的其他组件也可能导致问题。尝试逐步排除其他组件看看问题是否仍然存在。 个人的部分思路
后面我找到了引入的组件发现组件又引入了四个组件前面两个组件其实是一样的调的组件内的同一个方法但是传入的参数不一样。
组件AddItemGoods refaddItemGoods getItemListgetItemList /AddAcitiveGoods refAddAcitiveGoods getItemListgetGoodsItemData /AddStore refaddStore getStoreListgetStoreList /ItemPriceTable refitemPrice2 getItemListgetGoodsItemData /引入
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 xxxVue.component(xxx,xxx)但是好像应该不是这个问题吧我应该没有想在点子上吧
搞毛线直接回家过年项目能跑就行以后再研究去了。不能一直浪费时间在天天研究这东西哦有时间再搞。
