Dialog in Vue 传值
...<xx-dialog v-if="dialogData" :dialog-data="dialogData"/>...data () {return {...dialogData: xxx...}}问题描述:父控件绑定动态值到Dialog,Dialog第一次展示未能接收到值,第二次打开Dialog才能接收到值。...
·
...
<xx-dialog v-if="dialogData" :dialog-data="dialogData"/>
...
data () {
return {
...
dialogData: xxx
...
}
}
问题描述:
父控件绑定动态值到Dialog,Dialog第一次展示未能接收到值,第二次打开Dialog才能接收到值。
关于将v-if换成v-show,让dialog积极渲染,dialog在父控件渲染时就加载出来了,不能实现初始隐藏。
目标:
第一次打开就能接收到变化的值(已解决)。
解决方案:
- 针对不需要动态更新的数据,可采用将绑定值设置为props。
...
<xx-dialog v-if="dialogData" :dialog-data="dialogData"/>
...
props: {
...
dialogData: {
default: xxx
}
...
}
- 需要将值动态传入Dialog解决方案。其实很简单,在原来基础上,做一下代码调整及即可,将父控件的 v-if 移动到子控件
// 父控件
<xx-dialog :dialog-data="dialogData"/>
// 子控件
<xx-dialog
v-if="dialogData"
...>
...
</xx-dialog>
...
props:['dialogData']
...
前端菜鸟,入行不久,找了半天经验都未能找到解决方案,只找到一些类似的问题存在,发表博客纯属经验分享。
更多推荐
已为社区贡献1条内容
所有评论(0)