封装一个音乐列表music-list基础组件，可以共用，哪个需要的时候就是哪个props相应的值

1.封装music-lsit组件：

 <template>
   <div class="music-list  singer-detail">
     <div class="songList-top" :style="bgStyle">
       <div class="top-title">
         <i class="iconfont callback-icon"  @click="callBackSinger"></i>
         <h1 v-html="title"></h1>
       </div>
       <div class="wrapper"></div>
     </div>
   </div>
 </template>

 <script>
     export default {
         name: "music-lsit",
       props:{
           bgImage:{
             type:String,
             default:''
           },
         songs:{
             type:Array,
             // default:[]
             default:function(){//props传值的时候对象和数组的默认值都是由工厂函数返回；
             return []
           }
         },
         title:{
             type:String,
           default:''
         }
       },
       computed:{
         bgStyle(){
           return `background-image:url(${this.bgImage})`
         }
       },
       methods:{
         callBackSinger(){
           this.$router.push("/singer")
         }
       }

     }
 </script>

 <style scoped>
   .callback-icon{
     display: block;
     padding: 10px;
     font-size: 22px;
     color: #ffcd32;
     float: left;
   }
   .songList-top{
     position: relative;
     background-image: url("https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000");
     background-repeat:no-repeat;
     background-size: cover;
     width: 100%;
     padding-top: 70%;
     height: 0;
   }
   .top-title{
     position: absolute;
     top: 10px;
     text-align: center;
     width: 100%;
     z-index: 999;
   }
   .wrapper{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(7,17,27,0.4);
   }
   h1{
     font-size: 18px;
     color:#fff;

   }
 </style>

2.在singer-detail中引用传值：

  <music-lsit  :title="title" :bg-image="bgImage"></music-lsit>

  computed:{
      title(){
        return this.singer.name
      },
      bgImage(){
        return this.singer.avatar
      },
}