...
<xx-dialog v-if="dialogData" :dialog-data="dialogData"/>
...

data () {
    return {
    ...
    dialogData: xxx
    ...
    }
}

问题描述:

父控件绑定动态值到Dialog,Dialog第一次展示未能接收到值,第二次打开Dialog才能接收到值。

关于将v-if换成v-show,让dialog积极渲染,dialog在父控件渲染时就加载出来了,不能实现初始隐藏。

目标:

第一次打开就能接收到变化的值(已解决)。

解决方案:

  1. 针对不需要动态更新的数据,可采用将绑定值设置为props。
...
<xx-dialog v-if="dialogData" :dialog-data="dialogData"/>
...

props: {
    ...
    dialogData: {
        default: xxx
    }
    ...
}

  1. 需要将值动态传入Dialog解决方案。其实很简单,在原来基础上,做一下代码调整及即可,将父控件的 v-if 移动到子控件
// 父控件
<xx-dialog :dialog-data="dialogData"/>

// 子控件
<xx-dialog
    v-if="dialogData"
    ...>
    ...
</xx-dialog>

...
props:['dialogData']
...

前端菜鸟,入行不久,找了半天经验都未能找到解决方案,只找到一些类似的问题存在,发表博客纯属经验分享。

Logo

前往低代码交流专区

更多推荐