vue引入swiper组件后出现 ‘Maximum call stack size exceeded’错误的解决方法

于 2022-09-30 11:32:00 发布
阅读量323 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M40153c/article/details/127120674
版权

vue.js javascript 前端

vue项目，页面空白报了一个错误，错误如下：

由于引入了swiper插件，在组件里引用了，并且组件的name为Swiper，由于name与swiper插件重名了，所以

报这个错误。

 

我们可以把name 改成其他就不报错了

 

4 15 20 1C
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 的 "RangeError: Maximum call stack size exceeded"踩坑
weixin_43990215的博客
11-09 1518
点击加入购物车按钮报错：“RangeError: Maximum call stack size exceeded”，此按钮监听的方法名是 addCart() actions 中这样写： export default { addCart(context, payload) { // payload 是新添加的商品，需要判断这个 payload 有没有在 cartList 中 ...
vue中$watch的使用（解决RangeError: Maximum call stack size exceeded）
吹口琴的喵喵~~的博客
07-07 1152
碰到的问题： 在一个需求中，对一个表单的更改需要做一个历史记录的功能，由于这个表单非常大（是对一篇文章进行编辑），所以不可能具体到某一个属性，所以采用了watch监听的方法，设置{deep: true}。然而，在预览的时候碰到了RangeError: Maximum call stack size exceeded的错误，经过一番排查，定位到是watch监听引起的，再具体的就不知道什么问题了。 即使业务代码什么也没有写，只是简单的console.log也不行。只要设置了deep: true就会报错，非常头疼
swiper 组件 error: Maximum call stack size exceeded
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
08-03 600
报错信息: error: Maximum call stack size exceeded <template> <div class="header-swiper"> <swiper ref="mySwiper" :options="swiperOption"> <swiper-slide v-for='item in swiperList' :key='item.id'> <img :src
vue使用vue-awsome-swiper报错 :Maximum call stack size exceeded
Blueberry
02-19 886
vue使用vue-awsome-swiper报错 :Maximum call stack size exceeded 原因... 因为自己定义的Swiper.vue里的name和 插件里的swiper重复了 修改后name: 'HomeSwiper', 换个名字就好了 解释： 　　你的swiper组件的name属性不能和组件名相同 　　name的作用: ...
使用vue-awesome-swiper出现Uncaught RangeError: Maximum call stack size exceeded的问题
白菜编程之旅
12-01 2391
看看你的swiper组件的name属性 不能和组件名同名 name的作用:
VueAwesomeSwiper使用时超过最大堆栈调用大小
xiao_cheng_的博客
09-17 213
VueAwesomeSwiper使用时超过最大堆栈调用大小 vue项目使用VueAwesomeSwiper时报了Uncaught RangeError: Maximum call stack size exceeded的错误，经网上查找解决办法发现是vue的name属性不能设置为“swiper” <template> <div class="swiper"> <swiper :options="swiperOption"> <swiper
[Vue warn]: Error in nextTick: RangeError: Maximum call stack size exceeded
qq_43022132的博客
06-15 4537
当出现这个报错时，说明你有两个components的名称是一样的，所以在调用时两个循环调用不能结束就溢出栈了。 以我自己为例： 这个叫HomeSwiper的component我最开始给它取名为Swiper，但是HomeSwiper中又从vue-awesome-swiperimport了一个名为Swiper的component，因此两个名称重复了，导致我在其他地方调用HomeSwiper时，需要在template里写<swiper></swiper>，就出现Error in next
vue 下一种引起Maximum call stack size exceeded的情况
qietingfengsong的博客
04-19 999
项目场景： 项目中用到vue，其中有一段业务需要写递归函数 问题描述 写完函数运行的时候一直报Maximum call stack size exceeded，从字面上理解是栈溢出了，要么是递归太深，要么是栈内函数传参太大。 原因分析： 根据栈溢出的原因排查 1、我的递归不是很深只有三四层，应该不会是太深这个原因 2、递归函数传参的问题，我项目中用到vue，为了防止在箭头函数内出现this指向的问题，我把this作为参数传到递归函数内。可能是this这个参数过大，导致栈溢出。经过查找资料，箭头函数内的t
router.beforeEach使用不当导致死循环，引发RangeError: Maximum call stack size exceeded
qq_40342969的博客
08-30 2173
vue报错-RangeError: Maximum call stack size exceeded
使用递归生成el-menu子菜单报错“Maximum call stack size exceeded”处理
XinY__Liu的博客
01-27 5029
element-ui使用el-menu垂直菜单导航栏折叠后hover鼠标经过时会报“Maximum call stack size exceeded”错误的解决方案 侧边导航栏收起时，鼠标经过会报错“Maximum call stack size exceeded”，让我感到十分的疑惑，看了网上很多资料，包括升级了element-ui版本和热更新冲突等都没得到解决。 这种情况只有在有二级菜单的情况下，鼠标移动会循环报错，而一级菜单经过时则不会，接下来让我来给大家避避坑吧！ 困扰了我两天终于得到啦解
Maximum call stack size exceeded
热门推荐
成长的博客
05-23 42万+
错误描述 直接上错误截图： 错误解析 以上错误的意思是 "超出最大调用堆栈大小" 出现这种错误最常见的原因是：在代码中的某个地方，您正在调用一个函数，该函数又调用另一个函数，依此类推，直到达到调用堆栈限制。这几乎总是因为具有未满足的基本情况的递归函数 举例： (function a() { a(); })(); 调用堆栈会一直增长，直到达到限制：浏览...
Maximum call stack size exceeded 问题分析
CoreyXuu的博客
11-06 3万+
因为最近一直在写前端代码,刚好最经在前端遇到一个很奇怪的问题,如下截图: 翻译过来就是:超过最大调用堆栈大小 看到这样堆栈的代码我就很好奇,恕我才疏学浅,只知道虚拟机才会存在栈堆内存的问题,所以自己研究了一下: js中的堆栈内存,俗称叫做作用域(全局作用域/私有作用域),为js代码执行的环境(执行js代码的地方),基本数据类型值是存在栈内存的 堆内存: 存储引用数据类型值的（相当于...
npm ERR! Maximum call stack size exceeded 超过最大调用栈问题
Notes for Development
08-09 1万+
ray@ROYALHUANG-MB2:~/DevOps/kibana/kibana-6.3.2-darwin-x86_64$ sudo npm install Password: npm WARN deprecated @zeit/check-updates@1.1.0: Please use `update-check` instead. npm WARN deprecated bro...
Vue RangeError: Maximum call stack size exceeded报错
qq_43681850的博客
07-22 1112
这里写自定义目录标题 对于这个报错，我在代码中多次出现，最后检查代码都发现是自己的 jump(userId){ this.$router.push({path:"/User/userDetail", query:{userId:userId}}) } 里面的跳转路径是错误的，就会出现数组栈爆栈的错误，可以通过修改为正确的路径解决，但是仍然在寻找为什么会报这个错误的原因，也希望大佬能告知！谢谢大佬 ...
Maximum call stack size exceeded 调试日记
Aaron960214的博客
06-08 5752
1、错误信息为：Uncaught RangeError: Maximum call stack size exceeded （栈溢出）我没用递归啊，也没有引入冲突的js库，什么情况？一时头大。（一般是这两种原因，今天发现了另一种。）2、出错不是前段就是后端，（debug获取不到，肯定是前端了）3、在ajax之前弹窗试一试4、好像还真是参数错误。就看了看 最有可能也只有这个（自己代码自己多少会清楚...
vue路由 Maximum call stack size exceeded
Kratial的博客
06-21 1931
1.问题：在Vue项目开发中遇到根据登录来判断页面跳转时遇到这个问题 2.错误代码如下： const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) const token = store.getters.getToken router.beforeEach((to, from, next) => { if (!token) { next({ paht: '/e
‘Maximum call stack size exceeded’错误的解决方法
weixin_38168590的博客
08-03 1万+
今天打开vue项目，页面空白报了一个错误，错误如下： “Maximum call stack size exceeded” 错误的字面意思是：超出最大调用堆栈大小。 然后就是各种百度，找错误原因。百度好多篇，有的是由于router里面路径为声明，有的是未定义变量，有的由于是递归函数 产生死循环。我一一都排查了，还是这个错。 直到我百度到了一篇文章，由于他引入了swiper插件...
Maximum call stack size exceeded报错的原因及解决办法
博哥的二进制世界
06-30 9万+
Maximum call stack size exceeded报错的原因及解决办法背景解决办法Maximum call stack size exceeded报错原因如何解决 背景 在使用ElementUI的Select选择器，其中有一个可搜索的选择器，意思就是用户输入文字，选择器option选项可以模糊搜索（根据用户输入的文字推荐选项） 然后我给选择器的el-option根据数组 Options 进行遍历，该数组长度大概15万条，总之就是为了推荐选项更为精确，数组长度十分巨大 <el-selec
vue调用组件报Maximum call stack size exceeded.
最新发布
01-25
当Vue调用组件时出现"Maximum call stack size exceeded"错误通常是由于组件之间的无限循环引用导致的。这种情况下，组件A引用了组件B，而组件B又引用了组件A，从而导致了无限循环的调用堆栈溢出。 为了解决这个问题，你可以检查你的组件之间的引用关系，确保没有出现循环引用。另外，你还可以考虑使用Vue提供的一些工具来帮助你调试和解决这个问题。 以下是一些可能的解决方法： 1. 检查组件之间的引用关系，确保没有出现循环引用。你可以通过检查组件的import语句或组件之间的父子关系来查找循环引用的问题。 2. 使用Vue开发者工具来调试你的应用程序。Vue开发者工具是一个浏览器插件，可以帮助你检查组件之间的关系和数据流。你可以使用它来查看组件树、组件之间的引用关系以及组件的状态。 3. 使用Vue的异步组件来延迟加载组件。通过将组件定义为异步组件，你可以避免在初始化时加载所有组件，从而减少组件之间的引用关系。 4. 如果你确定没有循环引用的问题，那么可能是因为你的组件递归调用导致了堆栈溢出。你可以尝试通过添加条件来终止递归调用，或者使用v-if指令来控制组件的渲染。 下面是一个示例代码，演示了如何使用v-if指令来控制组件的渲染，以避免无限循环调用： ```vue <template> <div> <h1>Component A</h1> <component-b v-if="!isBRendered" /> </div> </template> <script> import ComponentB from './ComponentB.vue'; export default { components: { ComponentB }, data() { return { isBRendered: false }; }, mounted() { this.isBRendered = true; } }; </script> ``` 在上面的示例中，我们使用了一个名为`isBRendered`的变量来控制组件B的渲染。当`isBRendered`为false时，组件B会被渲染，否则不会被渲染。在组件A的`mounted`钩子函数中，我们将`isBRendered`设置为true，以避免无限循环调用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值