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”。 當我刪除數據時，一切正常。

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.selected = this.shelf Vue 將發出警告，表明您正在直接改變道具。 通常，您應該存儲要更改的屬性的本地副本。 我已經更新了上面的代碼來做到這一點。

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>

請為所有未來的人檢查您的命名約定:)

Answer 3

嘗試禁用 vue dev-tools 擴展...

幾個月來我的應用程序中出現了這個不穩定的錯誤，這讓我發瘋了！ 我剛剛意識到，如果我禁用 vue dev-tool chrome 擴展，它就再也不會發生了。

不完美，但它可以提供幫助。

Answer 4

vue2 中的同步發生了變化。

https://v2.vuejs.org/v2/guide/components.html#sync-Modifier

你應該這樣使用它

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

和孩子

this.$emit('update:selected', shelf)

或者你可以這樣做

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

和孩子

this.$emit("select")

Answer 5

就我而言，它發生在商店溢出時

const auth =  function({ next, store }){
    if(!store.getters.auth.loggedIn){
      return next('/login')
    }
    return next()
}
  
export {auth};

我像這樣更新並修復了這個問題。 希望這會對你有所幫助。

const auth =  function({ next, store }){
    if(store.getters.auth.loggedIn){
      return next('/login')
    }
    return next()
}
  
export {auth};