vue3使用Element-Plus框架Dialog v-model绑定问题解答

Element-Plus框架Dialog v-model绑定,报错

官方 el-dialog 弹出框绑定方式
请添加图片描述

看下图:可以看到,在el-dialog使用的 v-model直接报错

请添加图片描述

可以看到官方列出两种绑定方式,我们尝试model-value试一下

请添加图片描述

当我们使用 model-value 进行绑定时,控制台会有警告,这里按照它的意思使用 modelValue进行绑定,再次尝试
报错翻译:modelValue 道具检验失败,期望值是Boolean值,而得到的值为 popShow 字符串

请添加图片描述

如下是,Dialog单独抽离出来的vue3组件

当我们尝试强制类型转换时,控制台输出还是需要转换
modelValue=“ishow”
警告如上图控制台

请添加图片描述

父组件引入 Dialog抽离出来的文件

这里使用ref定义popShow为false,也就是隐藏,在子组件传递:popShow,子组件通过接收popShow值,进行展示隐藏

请添加图片描述

请添加图片描述

解决方案

如图下所示,改变为这种 绑定方式 ,问题解决,控制台也没有警告了
modelValue需要绑定一下

请添加图片描述
请添加图片描述

请添加图片描述

原理

modeValue绑定是一个普通的字符串,而vue中的绑定机制,是将绑定的值,作为js表达式去执行。
例如 < img src=“url” > 这样只是一个普通路径,页面解析src里面也是url,而使用 :src绑定到的url,是一个动态的js值

猜你喜欢

转载自blog.csdn.net/weixin_46426412/article/details/129333226