這時候props不能再用[]去定義，需要用{}，因為限制類型時，props就是作為一個對象去使用；

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

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

此時發(fā)現(xiàn)控制臺，會報錯，顯示age的數(shù)據(jù)類型不匹配。

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

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

答：當然可以。

假設姓名必傳，其他非必傳。

類型屬性：type:xx

必傳屬性：required：true

默認屬性：default：xx

name必傳，那么我們不傳試試，年齡不傳默認18

結(jié)果，控制臺同樣報錯，提示，name是必傳屬性。年齡我們沒傳，也成功展示的是默認值，19是因為一開始對年齡進行了加1操作，這樣我們就成功對屬性進行了限制。

對以上總結(jié)：

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

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

答：不可以

我們添加一個button，以及點擊事件

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

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

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

答：通過data去間接修改

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

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

總結(jié)：配置項props

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

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

（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去修改數(shù)據(jù)。

到此這篇關(guān)于vue中組件的props屬性的文章就介紹到這了,更多相關(guān)vue組件的props屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！