詳細聊聊vue中組件的props屬性

Posted on by

今天這篇文章，讓你徹底學會props屬性……

props主要用於組件的傳值，他的工作就是為瞭接收外面傳過來的數據，與data、el、ref是一個級別的配置項。

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

1、【定義被調用組件】首先，我們先定義一個person組件，用於顯示個人信息的組件，我們放瞭一個人的姓名，性別，以及年齡，定義好這個組件之後，就可以等待其他組件進行調用。那麼既然別的組件可以調用，我們就需要再定義一個props屬性，用於接收別的組件傳進來的值。

 註意：組件中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綁定值的時候，都去操作data裡面新定義的變量

此時可以看到，修改成功，也沒有報錯：

總結：配置項props

——-讓組件接收外部傳來的數據

 接收數據三種方式：

（1）隻接收：props: [‘name’,’age’,’sex’]

（2）接收並限制類型：props: { “name”:Number }

（3）限制類型、限制必要性指定默認值：

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

註意：props是隻讀的，vue底層會檢測你對props的修改，如果進行瞭修改，控制臺會報錯，必須修改，就復制一份到data中，通過data去修改數據。

到此這篇關於vue中組件的props屬性的文章就介紹到這瞭,更多相關vue組件的props屬性內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：