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
},
}