vue 关于element el-dialog dialogShow的使用心得
从前在写父组件控制子组件内弹窗的dialogShow的时候,基本上会在子组件内用watch去监听props传来的dialogShow,然后在子组件内设置新的标识,再去更新该标识。在子组件内改变dialogShow的时候,再去$emit去改变父组件内dialogShow的值。真的是写的很复杂,代码冗余,一个小操作写这么多代码。后面学到了下面这种写法。想要在父组件内控制子组件dialog的显示,可在组
·
从前在写父组件控制子组件内弹窗的dialogShow的时候,基本上会在子组件内用watch去监听props传来的dialogShow,然后在子组件内设置新的标识,再去更新该标识。在子组件内改变dialogShow的时候,再去$emit去改变父组件内dialogShow的值。真的是写的很复杂,代码冗余,一个小操作写这么多代码。后面学到了下面这种写法。
想要在父组件内控制子组件dialog的显示,可在组件上绑定一个显示属性例如:dialogShow.sync="displayShow"
子组件内其实只需要props接收到以后使用computed进行处理,get的时候则获取props的内容,set的时候是重点
使用this.$emit('update:dialogShow', val)
可以对组件上所绑定的属性dialogShow直接做更新,并在下一次get的时候可以获取到更新后的dialogShow
父组件内
...
<someDialog :dialogShow.sync="displayShow"
子组件内
...
props: {
dialogShow: {
type: Boolean
}
}
...
computed: {
dialogVisible: {
get () {
return this.dialogShow
},
set (val) {
this.$emit('update:dialogShow', val)
}
}
}
只需要这简单的操作,就解决了之前watch和反复emit的问题
更多推荐
已为社区贡献4条内容
所有评论(0)