6.点击删除对于的item，偶数边框胃红色

1.全局组件

components/ItemIndex.vue
定义一个点击事件将index通过$emit传到List页面

<template>
 <div class="item" >
   <div class="list" v-for="(item,index) of data" :key="item.id" @click="handleClick(index)">
       <slot name="icon"></slot>
       <img :src="item.coverImgUrl" alt="" class="bg">
       <p>{{item.name | format()}}</p>
   </div>
 </div>
</template>
<script>
    export default {
        name:"ItemIndex",
        props:{
            data:{
                type:Array,
                required:true
            },
        },
       //通过click事件将index传过去,父组件的事件名字要和子组件的事件名一样
        methods:{
            handleClick(index){
              this.$emit('click',index)
            }
        }
    }
</script>
<style scoped>
.bg{
    width: 240px;
    height: 240px;
}
p{
    font-size: 32px;
}
.list{
   width: 220px;
   margin-bottom: 20px;
   position: relative;
}
.list:nth-child(even){
    border: 1px solid red;
}
.item{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
</style>

2.List/index.vue

定义一个点击删除事件

<template>
   <div class="container">
        <item-index :data="playlists" @click="handleDelete"></item-index>
   </div>
</template>
<script>
import ItemIndex from '@/components/ItemIndex.vue'
export default {
  name:"List",
  data(){
    return{
      playlists:[],
    }
  },
  components:{
    ItemIndex
  },
  mounted(){
    this.axios.get("/top/playlist?limit=12").then(res=>{
      this.playlists=res.data.playlists
    })
  },
  methods:{
     handleDelete(index){
       this.playlists.splice(index,1)
    }
  },
}
</script>
<style scoped>
 .container{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 }
  .item:nth-child(even){
     border: 1px solid red;
 }
</style>