异步传参第一次获取数据为空

最新推荐文章于 2024-07-29 19:51:04 发布

原创最新推荐文章于 2024-07-29 19:51:04 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

30 篇文章

订阅专栏

这篇博客探讨了在Vue中如何通过异步获取数据并将其传递给子组件的过程。作者指出，由于异步操作，初次渲染时可能会遇到数据未加载的问题。通过在子组件中使用watch监听属性，并在数据更新时进行处理，可以确保数据正确传入子组件。此外，还展示了具体的代码示例来说明这一解决策略。

//1、通过异步获取数据
      this.api.apiDetail(this.form.id).then((res) => {
        this.form = res.data;
        this.form.outParams = JSON.parse(res.data.outParams)
        this.form.inParams = JSON.parse(res.data.inParams)
        console.log(this.form,'this.form')
        this.$refs.dataInput.showFormData()
        this.$refs.dataOutput.showFormData()
      });

//2、把this.form.outParams传给子组件
//子组件
    props:['Params'],
//2.1 但是发现第一次传不过去 因为这是异步传参  第一次渲染会优先渲染同步的数据

//2.2 添加这步就可以成功 watch监听 就ok了
    watch: {
        Params(val) {
            this.dynamicValidateForm.domains = []
            this.dynamicValidateForm.domains.push(...val)
        }
    },