vue父子组件的渲染问题

最新推荐文章于 2024-01-22 17:33:56 发布

fanny_匚

最新推荐文章于 2024-01-22 17:33:56 发布

阅读量497

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45634433/article/details/118938683

版权

在仿写网易云音乐项目中遇到Vue父子组件通信的问题，子组件接收到的URL始终为undefined。问题源于数据异步请求及父子组件间异步传值。通过对代码的分析，可以深入理解Vue中异步数据处理和组件通信的机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天自己在仿写网易云音乐的项目时,遇到一个问题,在使用一个播放的组件的时候,需要把父组件的url 传递到子组件使用,但是子组件获取到的url一直是undefined.
问题分析:
1.数据获取是异步请求
2.父子组件传值也是异步的
直观一点直接看代码:

template:
//父组件
  <div class="video">
        //子组件先与数据回来执行,所以拿到的url是undefined
        //<Playcard ref="video" :url="Urldata.url" />
        //解决方式
        <Playcard  v-if="Urldata.url" ref="video" :url="Urldata.url" />

  </div>

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