16.父组件传数组通过子组件遍历

1.父组件发送请求将取到的数组传到子组件

<template>
    <div>
        <Hot :data="playlists" ></Hot>    //通过自定义传值的方式
    </div>
</template>
<script>
import Hot from '@/components/Hot.vue'
    export default {
        name:"Music",
        data(){
            return{
                playlists:[],
            }
        },
        components:{
            Hot,
        },
        mounted(){
            var url="https://music.aityp.com/top/playlist";
            this.axios.get(url).then(res=>{
                this.playlists=res.data.playlists.slice(0,3);
            })
        }
    }
</script>

2.子组件接收传过来的数组并遍历

<template>
      <div v-for="item of data" :key="item.id">
        <div class="list">
          <img class="pic" :src="item.coverImgUrl" alt="" />
          <p>{{item.name}}</p>
        </div>
      </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array
    }
  }
};
</script>