在创建子组件时，道具未定义

Question

控制台中出现“ artists道具未定义”错误

组件的结构：

Discover> ArtistSlider> ArtistItem

Discover将属性artists传递到ArtistSlider，并且仅当从API接收到所有数据时才执行。但是ArtistSlider抛出错误，因为某些原因，prop artists未定义。同时，ArtistItem不会出错，尽管它是ArtistSlider的子元素，并且会从artist接收到道具ArtistSlider。

我阅读了有关Vue生命周期的信息，但仍然无法了解它发生的原因。尤其是在组件树的中间。

发现：

<template>
  <div>
    <h1>Discover page</h1>
    <artist-slider :artists="collection.new_artists"/>
  </div>
</template> 

<script>
import store from "@/store";
import Page from "@/mixins/Page";
import ArtistSlider from "@/components/ArtistSlider";

export default {
  extends: Page,
  async beforeRouteEnter(to, from, next) {
    const collection = await store.dispatch("fetchUrl", {
      url: "discover",
      params: { location: "uae" }
    });
    console.log('Received collection from API', collection)
    next(vm => (vm.collection = collection));
  },
  components: {
    ArtistSlider,
  },
  created() {
    console.log('Discover Created', this.collection)
  }
};
</script>

ArtistSlider：

<template>
  <section>
    <h2>New Artists</h2>
    <ul>
      <artist-item
        v-for="artist in artists"
        :key="artist.slug"
        :artist="artist"
      />
    </ul>
  </section>
</template>

<script>
import ArtistItem from './ArtistItem'

export default {
  name: "AppArtistSlider",
  props: {
    artists: {
      required: true,
      type: Array
    }
  },
  components: {
    ArtistItem
  },
  created() {
    console.log('Slider Created', this.artists)
  }
};
</script>

<style lang="scss" scoped>
</style>

ArtistItem：

<template>
  <li>
    <app-image :src="artist.avatar.small" :alt="artist.full_name" /> 
    <h3>{{artist.full_name}}</h3>
    <p>{{artist.art_type.name}}</p>
  </li>
</template>

<script>
  import AppImage from './AppImage.vue'

  export default {
    name: 'ArtistItem',
    props: {
      artist: {
        required: true,
        type: Object
      },
    },
    components: {
      AppImage
    },
    created() {
      console.log('Item Created', this.artist)
    }
  }
</script>

将帮助您。谢谢！