封装一个音乐列表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">&#xe60d;</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;
     100%;
    padding-top: 70%;
    height: 0;
  }
  .top-title{
    position: absolute;
    top: 10px;
    text-align: center;
     100%;
    z-index: 999;
  }
  .wrapper{
    position: absolute;
    top: 0;
    left: 0;
     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
      },
}