平常vue的props的參數(shù)類型,我使用的時候是字符串啊,數(shù)字啊啥的居多玄柠,今天因為需要通過傳參控制某些內(nèi)容的隱藏顯示,于是乎诫舅,用到了布爾值的參數(shù),但是每想到這個布爾值的參數(shù)給我坑了好久宫患。
首先我按照基本的操作刊懈,對這個參數(shù)進行了設置
然后我開始在要傳參的標簽上傳參了,因為要隱藏嘛虚汛,所以當然是false了匾浪,于是按照慣常想法,首先傳入字符串false
蛋辈,完全沒有一點效果,并沒有隱藏将谊。轉(zhuǎn)個角度冷溶,難道是因為他會將字符串中的內(nèi)容轉(zhuǎn)換成布爾值之后再來判斷?
我這“false"被判斷成了true了尊浓?如果是這樣的話逞频,那就得使用空字符串了,于是栋齿,空字符傳走起苗胀,悲催的是還是沒有起效果,仍舊沒有隱藏掉
這讓我有點疑惑了基协,咋滴?難道傳字符串都不對菇用?果然打開控制臺澜驮,看到了報錯,發(fā)現(xiàn)這個跟我想象的不一樣刨疼,根本不會將字符串轉(zhuǎn)化成布爾值的形式再判斷泉唁,對了,這個參數(shù)設置類型本來就是進行參數(shù)校驗的嘛揩慕,能轉(zhuǎn)化的話起什么校驗作用亭畜?!
哎呦我這腦袋啊迎卤,這波坑完全是自己跳進去的了拴鸵,哎。蜗搔。劲藐。。樟凄。聘芜。
就在自我反省的時候,突然想起來有的時候這種參數(shù)不寫的話缝龄,貌似會被認為是false汰现,于是乎挂谍,第三波走起,我不傳這個參數(shù)了
這咋還是沒有效果,不應該啊嗅战,這真的讓我有點徹底崩潰了妄田。
哎,沒辦法驮捍,只能官網(wǎng)走起了疟呐,沒有什么是官網(wǎng)解決不了,如果解決不了厌漂,就看第二遍
終于在官網(wǎng)的Prop — Vue.js? 一節(jié)里找到了答案萨醒,官網(wǎng)對于props參數(shù)是布爾類型的驗證規(guī)則如下:
上面的規(guī)則中說,包含參數(shù)沒有值的情況下苇倡,都會被認為是true富纸,所以我之前的干脆不寫都被認成了true,因此沒有起效果旨椒。如果想要將參數(shù)值變成布爾值的false晓褪,就要使用上面第二條中的動態(tài)綁定方法,通過v-bind告訴vue這是一個表達式综慎,不是字符串涣仿,于是乎,按照這個思路走起來示惊,只要把我的參數(shù)改寫成下面這種形式應該就可以了
試了一下好港,果然起了效果,該隱藏的部分隱藏掉了米罚。
以為這樣就結(jié)束了嗎钧汹?當然不是,還記得我最開始的給這個參數(shù)設置的默認值嗎录择?是true拔莱,既然true是這樣的結(jié)果,我就想知道如果false隘竭,是不是也是這樣塘秦,于是第二波測試走起。首先將原來的默認值改掉
除了上面使用v-bind的方式經(jīng)過驗證也可以正扯矗控制之外尊剔,我還試了一下直接加上這個參數(shù)和不寫這個參數(shù)的形式,即
發(fā)現(xiàn)這種方式也可以起到控制的作用菱皆,寫的時候须误,被認為是true笔咽,不寫的時候被認為是false,哈哈哈霹期,是跟默認值為true的時候不一樣的效果哦!
綜上所述:
無論默認值為true還是false,都可以通過v-bind進行值的傳參拯田,v-bind綁定為true历造,就是true,綁定false就是false
如果默認值為false的情況下船庇,也可以通過是否寫該參數(shù)控制吭产,寫上參數(shù)就是true,不寫就是false鸭轮,但是默認值為true的時候不可以
爬坑圓滿結(jié)束3加佟!窃爷!