vue中父子组件先后渲染_vue父子组件的渲染问题

今天自己在仿写网易云音乐的项目时,遇到一个问题,在使用一个播放的组件的时候,需要把父组件的url 传递到子组件使用,但是子组件获取到的url一直是undefined.

问题分析:

1.数据获取是异步请求

2.父子组件传值也是异步的

直观一点直接看代码:

template:

//父组件

//子组件先与数据回来执行,所以拿到的url是undefined

//

//解决方式

js:

data () {

return {

simidata:[],

detaildata:{},

brs:{},

Urldata:{}

}

},

created () {

this.init();

},

methods: {

async init(){

let mvid = this.$route.params.id

//获取相似的mv

let {data} = await this.$request.Getsimimv({mvid})

//获取mv 的详情

let backdata = await this.$request.Getmvdetail({mvid});

//获取mv的url

let urldata = await this.$request.Getmvurl({id:mvid})

this.simidata = data.mvs

this.detaildata = backdata.data.data

this.brs = backdata.data.data.brs

this.Urldata = urldata.data.data

console.log(this.Urldata.url); //url

}

}

子组件

import Player from "xgplayer";

export default {

props: ["url"],

mounted() {

this.initplay()

},

created () {

console.log(this.url); //undefined

},

methods() {

initplay(){

......

}

},

};