封装一个音乐列表music-list基础组件,可以共用,哪个需要的时候就是哪个props相应的值
1.封装music-lsit组件:
1 <template> 2 <div class="music-list singer-detail"> 3 <div class="songList-top" :style="bgStyle"> 4 <div class="top-title"> 5 <i class="iconfont callback-icon" @click="callBackSinger"></i> 6 <h1 v-html="title"></h1> 7 </div> 8 <div class="wrapper"></div> 9 </div> 10 </div> 11 </template> 12 13 <script> 14 export default { 15 name: "music-lsit", 16 props:{ 17 bgImage:{ 18 type:String, 19 default:'' 20 }, 21 songs:{ 22 type:Array, 23 // default:[] 24 default:function(){//props传值的时候对象和数组的默认值都是由工厂函数返回; 25 return [] 26 } 27 }, 28 title:{ 29 type:String, 30 default:'' 31 } 32 }, 33 computed:{ 34 bgStyle(){ 35 return `background-image:url(${this.bgImage})` 36 } 37 }, 38 methods:{ 39 callBackSinger(){ 40 this.$router.push("/singer") 41 } 42 } 43 44 } 45 </script> 46 47 <style scoped> 48 .callback-icon{ 49 display: block; 50 padding: 10px; 51 font-size: 22px; 52 color: #ffcd32; 53 float: left; 54 } 55 .songList-top{ 56 position: relative; 57 background-image: url("https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000"); 58 background-repeat:no-repeat; 59 background-size: cover; 60 width: 100%; 61 padding-top: 70%; 62 height: 0; 63 } 64 .top-title{ 65 position: absolute; 66 top: 10px; 67 text-align: center; 68 width: 100%; 69 z-index: 999; 70 } 71 .wrapper{ 72 position: absolute; 73 top: 0; 74 left: 0; 75 width: 100%; 76 height: 100%; 77 background: rgba(7,17,27,0.4); 78 } 79 h1{ 80 font-size: 18px; 81 color:#fff; 82 83 } 84 </style>
2.在singer-detail中引用传值:
<music-lsit :title="title" :bg-image="bgImage"></music-lsit> computed:{ title(){ return this.singer.name }, bgImage(){ return this.singer.avatar }, }
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;