平常vue的props的参数类型,我使用的时候是字符串啊,数字啊啥的居多,今天因为需要通过传参控制某些内容的隐藏显示,于是乎,用到了布尔值的参数,但是每想到这个布尔值的参数给我坑了好久。
首先我按照基本的操作,对这个参数进行了设置
然后我开始在要传参的标签上传参了,因为要隐藏嘛,所以当然是false了,于是按照惯常想法,首先传入字符串false
,完全没有一点效果,并没有隐藏。转个角度,难道是因为他会将字符串中的内容转换成布尔值之后再来判断?
我这“false"被判断成了true了?如果是这样的话,那就得使用空字符串了,于是,空字符传走起,悲催的是还是没有起效果,仍旧没有隐藏掉
这让我有点疑惑了,咋滴?难道传字符串都不对?果然打开控制台,看到了报错,发现这个跟我想象的不一样,根本不会将字符串转化成布尔值的形式再判断,对了,这个参数设置类型本来就是进行参数校验的嘛,能转化的话起什么校验作用?!
哎呦我这脑袋啊,这波坑完全是自己跳进去的了,哎。。。。。。
就在自我反省的时候,突然想起来有的时候这种参数不写的话,貌似会被认为是false,于是乎,第三波走起,我不传这个参数了
这咋还是没有效果,不应该啊,这真的让我有点彻底崩溃了。
哎,没办法,只能官网走起了,没有什么是官网解决不了,如果解决不了,就看第二遍
终于在官网的Prop — Vue.js 一节里找到了答案,官网对于props参数是布尔类型的验证规则如下:
上面的规则中说,包含参数没有值的情况下,都会被认为是true,所以我之前的干脆不写都被认成了true,因此没有起效果。如果想要将参数值变成布尔值的false,就要使用上面第二条中的动态绑定方法,通过v-bind告诉vue这是一个表达式,不是字符串,于是乎,按照这个思路走起来,只要把我的参数改写成下面这种形式应该就可以了
试了一下,果然起了效果,该隐藏的部分隐藏掉了。
以为这样就结束了吗?当然不是,还记得我最开始的给这个参数设置的默认值吗?是true,既然true是这样的结果,我就想知道如果false,是不是也是这样,于是第二波测试走起。首先将原来的默认值改掉
除了上面使用v-bind的方式经过验证也可以正常控制之外,我还试了一下直接加上这个参数和不写这个参数的形式,即
发现这种方式也可以起到控制的作用,写的时候,被认为是true,不写的时候被认为是false,哈哈哈,是跟默认值为true的时候不一样的效果哦!
综上所述:
无论默认值为true还是false,都可以通过v-bind进行值的传参,v-bind绑定为true,就是true,绑定false就是false
如果默认值为false的情况下,也可以通过是否写该参数控制,写上参数就是true,不写就是false,但是默认值为true的时候不可以
爬坑圆满结束!!!