Vue父子组件执行顺序问题

发布于 2022-09-11 20:52:27 字数 748 浏览 16 评论 0

场景:父组件的created中有个axios请求,请求返回后将结果放到query中,希望等axios返回并写入query再执行子组件mounted中的内容,但是总是先执行子组件的mounted,之后父组件axios才返回结果

(父组件axios的返回可能为空,所以不能在子组件中query的内容是否为空,而且子组件直接加watch的话刷新当前页会有问题)

尝试过了在子组件的mounted方法中加setTimeout,也不行

相关代码

父组件

created() {
    testPost().then(res => {
      if (res.data.length > 0) {
        this.numList = res.data.map(item => item)
        this.num = this.numList[0]
        this.$router.push({
          query: {
            cid: this.num
          }
        })
      }
    }).catch(err => {
      console.log(err)
    })
  }

子组件

mounted() {
    if (this.$route.query.cid) {
      //todo
    }else{
        //todo
    }
  }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

风筝有风,海豚有海 2022-09-18 20:52:27

把子组件写在mounted中的方法抽离出来写在methods里面,父组件拿到回调后主动去触发子组件的方法

心房的律动 2022-09-18 20:52:27

1.在子组件上加个v-if等拿到query之后再渲染
2.子组件watch query

故人的歌 2022-09-18 20:52:27

既然是父子组件数据的传递是否可以直接采用prop来传递,
子组件 监听prop属性的变化, 然后执行 你需要执行的函数。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文