一、傳遞數(shù)據(jù)

在要傳遞的組件標(biāo)簽中配置傳遞信息：

屬性名 = "屬性值"

注意：如果傳遞的屬性值是一個(gè)表達(dá)式，要使用：屬性名="屬性值" 的形式。

二、接收數(shù)據(jù)

在目標(biāo)組件中配置props進(jìn)行數(shù)據(jù)接收：

方式一：直接接收

注意：這里的屬性名和上面?zhèn)鬟f數(shù)據(jù)時(shí)配置的屬性名要相同

props:["屬性1", "屬性2"]

方式二：限制類(lèi)型

可以通過(guò)限制類(lèi)型的方式限制傳遞過(guò)來(lái)的數(shù)據(jù)類(lèi)型，放置數(shù)據(jù)出錯(cuò):

props:{  屬性1:類(lèi)型,  屬性2:類(lèi)型  }

方式三：所有配置項(xiàng)

完整寫(xiě)法中我們可以對(duì)每一個(gè)接收的屬性再進(jìn)行單獨(dú)的配置：

props:{  屬性1:{ // 配置項(xiàng) },  屬性2: { // 配置項(xiàng) }  }

有如下配置項(xiàng)：

type    // 屬性的數(shù)據(jù)類(lèi)型

required    // 該屬性是否為必填項(xiàng)

default    // 若未傳該屬性，設(shè)置默認(rèn)值

三、注意事項(xiàng)

 Vue規(guī)定我們通過(guò)props接收過(guò)來(lái)的屬性不能夠修改。

如果我修改，就會(huì)進(jìn)行控制臺(tái)報(bào)錯(cuò)：

那我們?nèi)绻娴南胍獙?duì)接收過(guò)來(lái)的數(shù)據(jù)進(jìn)行修改該怎么辦呢？

我們可以配置兩份數(shù)據(jù)，一份是props接收過(guò)來(lái)的數(shù)據(jù)，一份是組件中data的數(shù)據(jù)，data中的數(shù)據(jù)用于修改。

因?yàn)閜rops的優(yōu)先級(jí)比data高，所以我們能在data中收到props中的數(shù)據(jù)：

到此這篇關(guān)于Vue props實(shí)現(xiàn)父組件給子組件傳遞數(shù)據(jù)的方式的文章就介紹到這了,更多相關(guān)Vue props傳遞數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！