詳細聊聊vue中元件的props屬性
目錄
- 問題一：那props具體是怎麼使用呢？原理又是什麼呢？往下看
- 問題二：那如果我們想給年齡加1歲，怎麼實現？
- 問題三：對於年齡這一型別，我們最希望拿到的是什麼資料型別？
- 問題四：可以限制類型，那是不是也可以限制是否必傳呢？
- 問題五：props接收的屬性值可以修改嗎？
- 問題六：必須要修改props屬性值，怎麼辦？
- 總結：配置項prophttp://www.cppcns.coms
今天這篇文章，讓你徹底學會props屬性……
props主要用於元件的傳值，他的工作就是為了接收外面傳過來的資料，與data、el、ref是一個級別的配置項。
問題一：那props具體是怎麼使用呢？原理又是什麼呢？往下看
1、【定義被呼叫元件】
注意：元件中name、sex、age都是一個prop，將三個屬性放到一起，就是props，這就是props的由來，是prop的複數形式，代表多個prop屬性的集合。
2、【呼叫元件】此時我們再定義一個info元件，用於展示這個人的基本資訊，進行對person組價的呼叫實現資訊的展示，分為下圖四個步驟進行呼叫。並傳入引數
3、【看效果】傳入成功。
問題二：那如果我們想給年齡加1歲，怎麼實現？
我們可能會直接這樣加1
看效果是否能實現，變成19，看下圖顯然是不正確的。因為你傳入的年齡是個字串18，所以加1只會在18後面進行拼接。
然後有的人說，那傳數字，怎麼傳數字呢？很簡單，一個符號搞定。
我們只需要在age前面加上冒號 ：他就會只識別雙引號裡面的東西18，否則識別的是雙引號18
看下效果，此時就成功了。
問題三：對於年齡這一型別，我們最希望拿到的是什麼資料型別？
肯定是數字型別，但是有人非要傳字串型別，就會影響我們對年齡的計算，比如上面的加1……那麼我們如何限制類型呢？
這時候props不能再用[]去定義，需要用{}，因為限制類型時，props就是作為一個物件去使用；
下面就是我們將三個屬性分別做了限制。
我們把年齡做了number型別限制後，再傳入字串18，看有什麼變化？
此時發現控制檯，會報錯，顯示age的資料型別不匹配。
雖然不影響展示，但是會報錯。這可以給我們提供一個明確的提示。方便我們規範的傳入資料。
問題四：可以限制類型，那是不是也可以限制是否必傳呢？
答：當然可以。
假設姓名必傳，其他非必傳。
型別屬性：type:xx
必傳屬性：required：true
預設屬性：default：xx
name必傳，那麼我們不傳試試，年齡不傳預設18
結果，控制檯同樣報錯，提示，name是必傳屬性。年齡我們沒傳，也成功展示的是預設值，19是因為一開始對年齡進行了加1操作，這樣我們就成功對屬性進行了限制。
對以上總結：
props在接收資料的同時，對資料進行了型別限制+預設值的指定+必要性的限制
問題五：props接收的屬性值可以修改嗎？
答：不可以
我們新增一個button，以及點選事件
注意：我們要訪問props裡面的屬性值，通過this.即可找到
檢視結果，發現頁面可以顯示，但是控制檯報錯，因此它是不可修改的
問題六：必須要修改props屬性值，怎麼辦？
答：通過data去間接修改
我們在data裡面重新定義一個變數去接收props屬性。這個變數最好不要重名，重名的話，優先獲取props屬性值，優先順序props>data。然後我們在操作或者html繫結值的時候，都去操http://www.cppcns.com作data裡面新定義的變數
此時可以看到，修改成功，也沒有報錯：
總結：配置項props
-------讓元件接收外部傳來的資料
接收資料三種方式：
（1）只接收：props:['name','age','sex']
（2）接收並限制類型：props: { "name":Number }
（3）限制類型、限制必要性指定預設值：
props:{
"name":{
type:String,required:truwebjPNe
},"age":{
type:Number,default:18
},webjPN "sex":{
type:String,default:'男'
},},
注意：props是隻讀的，底層會檢測你對props的修改，如果進行了修改，控制檯會報錯，必須修改，就複製一份到data中，通過data去修改資料。
到此這篇關於vue中元件的props屬性的文章就介紹到這了,更多相關vue元件的props屬性內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！