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

Posted 2021-01-02 Carina

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">&#xe60d;</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
      },
}