Vue.js“超过最大调用堆栈大小”错误。将数据从父级传递到子级失败

我无法将数据从父级传递到子级。我正在使用道具，也尝试过返回数据-没有运气。我有一个面板组件，它是具有数据的父组件和panelBody组件子组件

小组成员名单如下：

<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>

我的主体是：

<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>

---

请帮忙！无法找出错误vue.esm.js？65d7:3877未捕获范围错误：超出了最大调用堆栈大小。删除数据时，一切正常。

vue2中的同步已更改

你应该这样使用它

<panel-body :shelf="shelf" :selected="selected" @update:selected="val => selected = val"></panel-body>

或 你可以这样做

<panel-body :shelf="shelf" :selected="shelf == selected" @select="selected = shelf"></panel-body>

---

你出错的原因是什么

超过最大调用堆栈大小

就是因为这个

import PanelBody from '../components/PanelBody'
export default {
  name: 'panel-body',
  components: {
    'panel-body': PanelBody
  },

您使用名称“面板主体”定义了面板组件。将其更改为“panel”，您将删除循环引用

评论和其他答案中提到的其他问题通常也适用。以下是您的组件的工作版本

Panel.vue

PanelBody.vue

---

我想再注意一件事。由于PanelBody中的这一行，this.selected=this.shelf Vue将抛出一条警告，提示您正在直接变异道具。通常，您应该存储将要变异的属性的本地副本。我已经更新了上面的代码来实现这一点。

您所在的Vue的名称不应与您要导入的组件的名称相同

就我而言

<template>
 <div>
    <SingleStandard></SingleStandard>
 </div>
</template>

<script>
    import SingleStandard from '../components/SingleStandard';

    export default {
      name: 'SingleStandard',
      components: { SingleStandard },
    };
</script>

上面的代码导致了相同的问题，但是当我更改导出组件的名称时，它工作了

<template>
 <div>
    <SingleStandard></SingleStandard>
 </div>
</template>

<script>
    import SingleStandard from '../components/SingleStandard';

    export default {
      name: 'SingleStandardView', <-------------
      components: { SingleStandard },
    };
</script>

---

请检查您对所有未来人员的命名约定：

您不应使用带有数据属性的=>函数，只需使用数据{return{…}}是否有效…？，不可取消，我得到一个属性或方法shelfs不是在实例上定义的，而是在渲染期间引用的，并且data选项应该是一个函数，它在组件定义中返回每个实例的值。这很奇怪。你是对的，但不完全正确。您可以使用prop.sync=parentProp，因为在问题中，它会自动扩展为prop事件声明。问题代码中唯一需要更改的是：不要手动改变道具this.selected=this.shelf，应该有这个。$emit'update:selected'，this.shelf。例句：我尝试了约翰和沃斯特克斯建议的所有变体，但都没有成功。错误现在是属性或方法shelfs未在实例上定义，而是在渲染期间引用。但是这个错误只是不同，因为数据现在不是一个函数，就像瓦姆西·克里希纳建议的那样。数据必须是一个函数data:function{return{bla:true}}@TeomanKirac不客气。还有一个问题目前尚未解决；此代码将产生一个错误，即您正在直接修改道具。我会在一分钟内发布一个修复程序。@TeomanKirac我用一个快速的解释更新了面板主体代码。伯特先生，你太棒了。非常感谢您的解释和专业知识。非常感谢：我向VueMy报告这个问题的地方是，我的页面名称max button与组件名称MaxButton相同，组件名称MaxButton也可用作max-button。是的，我也是这样，但我的方法与映射操作的名称相同。

<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>

<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>

<template>
 <div>
    <SingleStandard></SingleStandard>
 </div>
</template>

<script>
    import SingleStandard from '../components/SingleStandard';

    export default {
      name: 'SingleStandard',
      components: { SingleStandard },
    };
</script>

<template>
 <div>
    <SingleStandard></SingleStandard>
 </div>
</template>

<script>
    import SingleStandard from '../components/SingleStandard';

    export default {
      name: 'SingleStandardView', <-------------
      components: { SingleStandard },
    };
</script>