Dialog in Vue 传值

...
<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']
...

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