- 首页
- 前端开发
- Vue.js“超出最大调用堆栈大小"错误.将数据从父级传递给子级失败
Vue.js“超出最大调用堆栈大小"错误.将数据从父级传递给子级失败
[英] Vue.js "Maximum call stack size exceeded" error. Passing data from parent to child failing
本文介绍了Vue.js“超出最大调用堆栈大小"错误.将数据从父级传递给子级失败的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法将数据从父级传递给子级.我正在使用道具，也尝试过返回数据 - 没有运气.我有一个带有数据的面板组件(它是父组件)和 panelBody 组件(子组件)
面板如下:
<div id="面板"><div class="面板"><ul><li v-for="货架上的货架"><panel-body :shelf="shelf" :selected.sync="selected"></panel-body>
</模板><脚本>从'../components/PanelBody'导入PanelBody导出默认{name: '面板体',成分: {'面板主体':面板主体},数据:() =>({货架:[{name: '货架 1',书籍:[{标题:'Lorem ipum'}, {标题:多洛尔坐 amet"}]}, {name: '货架 2',书籍:[{标题:'Ipsum lorem'}, {标题:'Amet坐多洛尔'}]}],选择:{}})}<样式范围>一种 {颜色:#42b983；}</风格>
我的面板主体是:
<div id="面板主体"><a href="#" v-on:click.prevent.stop="select">{{shelf.name }}</a><ul v-show="isSelected"><li v-for="book inshelf.books">{{ book.title }}</li>
</模板><脚本>导出默认{name: '面板体',道具:['架子'，'选择']，计算:{isSelected: 函数 () {返回 this.selected === this.shelf}},方法: {选择:函数(){this.selected = this.shelf}}}<样式范围>一种 {颜色:#42b983；}</风格>
请帮忙！无法弄清楚错误vue.esm.js?65d7:3877 Uncaught RangeError: Maximum call stack size exceeded".当我删除数据时，一切正常.
解决方案
出现错误的原因
<块引用>超出最大调用堆栈大小
就是因为这个
从'../components/PanelBody'导入PanelBody导出默认{name: '面板体',成分: {'面板主体':面板主体},
您使用 name: 'panel-body' 定义了 Panel 组件.将其更改为 name: 'panel'，您将删除循环引用.
评论中提到的其他问题和其他答案通常也适用.这是您的组件的工作版本.
Panel.vue
<div id="面板"><div class="面板"><ul><li v-for="货架上的货架"><panel-body :shelf="shelf" :key="shelf.name" :selected.sync="selected"></panel-body>
{{选择}}
</模板><脚本>从'./PanelBody.vue'导入PanelBody导出默认{name: '面板',成分: {'面板主体':面板主体},数据(){返回 {货架:[{name: '货架 1',书籍:[{标题:'Lorem ipum'}, {标题:多洛尔坐 amet"}]}, {name: '货架 2',书籍:[{标题:'Ipsum lorem'}, {标题:'Amet坐多洛尔'}]}],选择:{}}}}<样式范围>一种 {颜色:#42b983；}</风格>
PanelBody.vue
<div id="面板主体"><a href="#" v-on:click.prevent.stop="select">{{shelf.name }}</a><ul v-show="isSelected"><li v-for="book inshelf.books">{{ book.title }}</li>
</模板><脚本>导出默认{name: '面板体',道具:['架子'，'选择']，数据(){返回 {内部选择:空}},计算:{isSelected: 函数 () {返回 this.internalSelected === this.shelf}},方法: {选择:函数(){this.internalSelected = this.shelfthis.$emit("update:selected", this.internalSelected)}}}<样式范围>一种 {颜色:#42b983；}</风格>
我还想注意一件事.由于PanelBody 中的this 行，this.selected = this.shelf Vue 将抛出警告，提示您正在直接改变道具.通常，您应该存储要变异的属性的本地副本.我已经更新了上面的代码来做到这一点.
I cannot pass data from parent to child. I am using props, have tried returning data as well - no luck. I have a panel component (which is parent) with data and panelBody component (child)
Panel is as follows:
<template>
<div id="panel">
<div class="panel">
<ul>
<li v-for="shelf in shelfs">
<panel-body :shelf="shelf" :selected.sync="selected"></panel-body>
</li>
</ul>
</div>
</div>
</template>
<script>
import PanelBody from '../components/PanelBody'
export default {
name: 'panel-body',
components: {
'panel-body': PanelBody
},
data: () => ({
shelfs: [{
name: 'shelf 1',
books: [{
title: 'Lorem ipum'
}, {
title: 'Dolor sit amet'
}]
}, {
name: 'shelf 2',
books: [{
title: 'Ipsum lorem'
}, {
title: 'Amet sit dolor'
}]
}],
selected: {}
})
}
</script>
<style scoped>
a {
color: #42b983;
}
</style>
My panelBody is:
<template>
<div id="panel-body">
<a href="#" v-on:click.prevent.stop="select">{{ shelf.name }}</a>
<ul v-show="isSelected">
<li v-for="book in shelf.books">{{ book.title }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'panel-body',
props: ['shelf', 'selected'],
computed: {
isSelected: function () {
return this.selected === this.shelf
}
},
methods: {
select: function () {
this.selected = this.shelf
}
}
}
</script>
<style scoped>
a {
color: #42b983;
}
</style>
Please help! Can't figure out the error "vue.esm.js?65d7:3877 Uncaught RangeError: Maximum call stack size exceeded". WHen I remove the data everything works like it should.
解决方案
The reason you have the error
Maximum call stack size exceeded
is because of this
import PanelBody from '../components/PanelBody'
export default {
name: 'panel-body',
components: {
'panel-body': PanelBody
},
You defined your Panel component with name: 'panel-body'. Change that to name: 'panel', and you will remove your circular reference.
The other issues mentioned in comments and the other answer generally apply as well. Here are working versions of your components.
Panel.vue
<template>
<div id="panel">
<div class="panel">
<ul>
<li v-for="shelf in shelfs">
<panel-body :shelf="shelf" :key="shelf.name" :selected.sync="selected"></panel-body>
</li>
</ul>
</div>
{{selected}}
</div>
</template>
<script>
import PanelBody from './PanelBody.vue'
export default {
name: 'panel',
components: {
'panel-body': PanelBody
},
data(){
return {
shelfs: [{
name: 'shelf 1',
books: [{
title: 'Lorem ipum'
}, {
title: 'Dolor sit amet'
}]
}, {
name: 'shelf 2',
books: [{
title: 'Ipsum lorem'
}, {
title: 'Amet sit dolor'
}]
}],
selected: {}
}
}
}
</script>
<style scoped>
a {
color: #42b983;
}
</style>
PanelBody.vue
<template>
<div id="panel-body">
<a href="#" v-on:click.prevent.stop="select">{{ shelf.name }}</a>
<ul v-show="isSelected">
<li v-for="book in shelf.books">{{ book.title }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'panel-body',
props: ['shelf', 'selected'],
data(){
return {
internalSelected: null
}
},
computed: {
isSelected: function () {
return this.internalSelected === this.shelf
}
},
methods: {
select: function () {
this.internalSelected = this.shelf
this.$emit("update:selected", this.internalSelected)
}
}
}
</script>
<style scoped>
a {
color: #42b983;
}
</style>
I wanted to note one more thing. Because of this line in PanelBody, this.selected = this.shelf Vue will throw a warning that you are mutating a prop directly. Generally you should store a local copy of a property that you are going to mutate. I've updated the code above to do that.
这篇关于Vue.js“超出最大调用堆栈大小"错误.将数据从父级传递给子级失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
