使用网易云音乐api接口开发网页版音乐播放器开发难题（一）

将子组件中获取到后台的url参数传递给父组件

解决方法：

 axios({
 //获取url
  url:'http://localhost:3000/song/url',
  method:'get',
  params:{
    id
  },
  }).then(res=>{
    // console.log(res);
    let url = res.data.data[0].url
    //将获取到的url参数传递给父组件使用
    this.$parent.musicUrl = url
  })
}

处理时长 毫秒 转为 分秒

方法一：

//res为获取到的数据
this.songs = res.data.data;
        // 处理时长 毫秒 转为 分秒
        for (let i = 0; i < this.songs.length; i++) {
          // 获取毫秒数
          let duration = this.songs[i].duration;
          let min = parseInt(duration / 1000 / 60);
          let sec = parseInt((duration / 1000) % 60);
          if (min < 10) {
            min = "0" + min;
          }
          if (sec < 10) {
            sec = "0" + sec;
          }
          // console.log(min + '|' + sec);
          this.songs[i].duration = `${min}:${sec}`;
          }

方法二：
全局过滤器

Vue.filter('playTimeFormat', function (originVal) {
  let duration = originVal
  let min = parseInt(duration / 1000 / 60)
  if (min < 10) {
    min = '0' + min
  }
  let sec = parseInt((duration / 1000) % 60)
  if (sec < 10) {
    sec = '0' + sec
  }
  return `${min}:${sec}`
})

歌曲搜索功能出现bug（搜索字段点击回车，url地址和一部分静态内容发生了改变，但是获取到的数据列表没有发生改变，在重新刷新页面之后数据完成改变）

//这里可以动态绑定一下keywords
<h2 class="title" :keywords="(keywords = $route.query.q)">{{ $route.query.q }}</h2>

//之所以出现上面问题没有报错，是因为在写axios的时候，keywords的值设置了，但这里会出现渲染问题，最好是使用外部的全局变量（this.keywords）,然后动态绑定一下
axios({
        url: "http://localhost:3000/search",
        method: "get",
        params: {
          keywords: this.$route.query.q,
          limit: this.pageSize,
          // offset: (this.pageNum - 1) * this.pageSize,
          type,
          limit
        }
      })

注：本文全为作者自己开发中总结小知识点，如有错误，欢迎指正，共同学习