Vue.js“超出最大调用堆栈大小”错误。将数据从父母传递给孩子失败

Question

我无法将数据从父母传递给孩子。我正在使用道具，也尝试过返回数据 - 没有运气。我有一个带有数据的面板组件（它是父组件）和 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>

我的 panelBody 是：

 <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 Uncaught RangeError: Maximum call stack size exceeded”。当我删除数据时，一切正常。

原文由 Teoman Kirac 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你有错误的原因

超出最大调用堆栈大小

是因为这个

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

您使用 name: 'panel-body' 定义了 Panel 组件。将其更改为 name: '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>

面板体.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>

我还想注意一件事。由于 PanelBody 中的 这一 行， this.selected = this.shelf Vue 将发出警告，表明您正在直接改变道具。通常，您应该存储要更改的属性的本地副本。我已经更新了上面的代码来做到这一点。

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您所在的 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>

请为所有未来的人检查您的命名约定:)

原文由 Sweet Chilly Philly 发布，翻译遵循 CC BY-SA 4.0 许可协议