通过props进行渲染页面以及对歌单详情页的背景处理

我们创建一个名为itemMusicTop.vue组件作为itemMusic.vue的子组件，负责整个歌单详情页的top部分（如图）

所以在子组件itemMusicTop.vue中，我们需要拿到之前playList中的值，这就是一个父向子传值的过程

1、导入子组件后，为子组件导入一个自定义属性playList

 

2、在子组件中拿到数据

3、然后就可以拿到背景了

<template>
  <div class="itemMusicTop">
    <!-- 拿到背景 -->
    <img :src="playList.coverImgUrl" alt class="bgimg" />
    <div class="itemLeft">
      <!-- $router.back()和$router.go(-1)作用相同，都是返回原页面 -->
      <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
        <use xlink:href="#icon-zuojiantou" />
      </svg>
      <span>歌单</span>
    </div>
    <div class="itemRight">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo" />
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-31liebiao" />
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  setup (props) {
    // 这样就拿到了父组件的playList，接下来我们就开始渲染了
    console.log(props);

  },
  // 
  props: ['playList']
}
</script>
<style lang="less" scoped>
.itemMusicTop {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: 0.2rem;
  position: relative;
  .itemLeft,
  .itemRight {
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0.2rem;
    span {
      font-size: 0.4rem;
      color: white;
    }
    .icon {
      // 填充颜色
      fill: white;
    }
  }
  .bgimg {
    width: 100%;
    height: 11rem;
    position: fixed;
    // 修改层级z-index
    z-index: -1;
    // 图片虚化
    filter: blur(0.6rem);
  }
}
</style>