vue中組件的props屬性有什么用

這篇文章主要介紹vue中組件的props屬性有什么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

問題一：那props具體是怎么使用呢？原理又是什么呢？往下看

1、【定義被調(diào)用組件】首先，我們先定義一個(gè)person組件，用于顯示個(gè)人信息的組件，我們放了一個(gè)人的姓名，性別，以及年齡，定義好這個(gè)組件之后，就可以等待其他組件進(jìn)行調(diào)用。那么既然別的組件可以調(diào)用，我們就需要再定義一個(gè)props屬性，用于接收別的組件傳進(jìn)來的值。

 注意：組件中name、sex、age都是一個(gè)prop，將三個(gè)屬性放到一起，就是props，這就是props的由來，是prop的復(fù)數(shù)形式，代表多個(gè)prop屬性的集合。

 2、【調(diào)用組件】此時(shí)我們再定義一個(gè)info組件，用于展示這個(gè)人的基本信息，進(jìn)行對person組價(jià)的調(diào)用實(shí)現(xiàn)信息的展示，分為下圖四個(gè)步驟進(jìn)行調(diào)用。并傳入?yún)?shù)

 3、【看效果】傳入成功。

 問題二：那如果我們想給年齡加1歲，怎么實(shí)現(xiàn)？

我們可能會(huì)直接這樣加1

 看效果是否能實(shí)現(xiàn)，變成19，看下圖顯然是不正確的。因?yàn)槟銈魅氲哪挲g是個(gè)字符串18，所以加1只會(huì)在18后面進(jìn)行拼接。

 然后有的人說，那傳數(shù)字，怎么傳數(shù)字呢？很簡單，一個(gè)符號(hào)搞定。

我們只需要在age前面加上冒號(hào) ：他就會(huì)只識(shí)別雙引號(hào)里面的東西18 ，否則識(shí)別的是雙引號(hào)18

 看下效果，此時(shí)就成功了。

 問題三：對于年齡這一類型，我們最希望拿到的是什么數(shù)據(jù)類型？

肯定是數(shù)字類型，但是有人非要傳字符串類型，就會(huì)影響我們對年齡的計(jì)算，比如上面的加1……那么我們?nèi)绾蜗拗祁愋湍兀?/strong>

 這時(shí)候props不能再用[]去定義，需要用{}，因?yàn)橄拗祁愋蜁r(shí)，props就是作為一個(gè)對象去使用；

下面就是我們將三個(gè)屬性分別做了限制。

 我們把年齡做了number類型限制后，再傳入字符串18，看有什么變化？

 此時(shí)發(fā)現(xiàn)控制臺(tái)，會(huì)報(bào)錯(cuò)，顯示age的數(shù)據(jù)類型不匹配。

 雖然不影響展示，但是會(huì)報(bào)錯(cuò)。這可以給我們提供一個(gè)明確的提示。方便我們規(guī)范的傳入數(shù)據(jù)。

 問題四：可以限制類型，那是不是也可以限制是否必傳呢？

 答：當(dāng)然可以。

假設(shè)姓名必傳，其他非必傳。

類型屬性：type:xx

必傳屬性：required：true

默認(rèn)屬性：default：xx

 name必傳，那么我們不傳試試，年齡不傳默認(rèn)18

 結(jié)果，控制臺(tái)同樣報(bào)錯(cuò)，提示，name是必傳屬性。年齡我們沒傳，也成功展示的是默認(rèn)值，19是因?yàn)橐婚_始對年齡進(jìn)行了加1操作，這樣我們就成功對屬性進(jìn)行了限制。

對以上總結(jié)：

props在接收數(shù)據(jù)的同時(shí)，對數(shù)據(jù)進(jìn)行了類型限制+默認(rèn)值的指定+必要性的限制

問題五：props接收的屬性值可以修改嗎？

答：不可以

我們添加一個(gè)button，以及點(diǎn)擊事件

 注意：我們要訪問props里面的屬性值，通過this.即可找到

 查看結(jié)果，發(fā)現(xiàn)頁面可以顯示，但是控制臺(tái)報(bào)錯(cuò)，因此它是不可修改的

 問題六：必須要修改props屬性值，怎么辦？

 答：通過data去間接修改

我們在data里面重新定義一個(gè)變量去接收props屬性。這個(gè)變量最好不要重名，重名的話，優(yōu)先獲取props屬性值，優(yōu)先級(jí)props>data。然后我們在操作或者h(yuǎn)tml綁定值的時(shí)候，都去操作data里面新定義的變量

 此時(shí)可以看到，修改成功，也沒有報(bào)錯(cuò)：

 總結(jié)：配置項(xiàng)props

-------讓組件接收外部傳來的數(shù)據(jù)

 接收數(shù)據(jù)三種方式：

（1）只接收：props: ['name','age','sex']

（2）接收并限制類型：props: { "name":Number }

（3）限制類型、限制必要性指定默認(rèn)值：

props:{
        "name":{
            type:String,
            required:true
        },
        "age":{
            type:Number,
            default:18
        },
        "sex":{
            type:String,
            default:'男'
        },
    },

注意：props是只讀的，vue底層會(huì)檢測你對props的修改，如果進(jìn)行了修改，控制臺(tái)會(huì)報(bào)錯(cuò)，必須修改，就復(fù)制一份到data中，通過data去修改數(shù)據(jù)。

以上是“vue中組件的props屬性有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！