作用：父組件通過 props 向下傳遞數(shù)據(jù)給子組件；

用途：當(dāng)有一種類型的組件需要被使用多次，每一次的調(diào)用都只是特定的地方不同，就好像一張個(gè)人簡(jiǎn)介表，每次填的人的信息都不同，但是結(jié)構(gòu)都是一樣的。

用法1（不指定類型的簡(jiǎn)單接受）:

在父組件里面引入子組件，通過子組件的標(biāo)簽屬性傳遞參數(shù)，在子組件里面定義一個(gè)props選項(xiàng)進(jìn)行接收使用，要注意在子組件里面不需要在props以外的地方事先定義

在上面可以看見傳進(jìn)來的age是一個(gè)字符串類型，如果想要讓傳進(jìn)來的值自動(dòng)加1不能在子組件使用時(shí)里面＋1，如下圖所示會(huì)變成字符串加法241

 正確的解決方案是在父組件進(jìn)行傳參時(shí)就要進(jìn)行使用v-bind進(jìn)行動(dòng)態(tài)綁定，又或者可以使用一個(gè)冒號(hào)：(簡(jiǎn)寫形式)，作用都是運(yùn)行引號(hào)里面的表達(dá)式返回運(yùn)行結(jié)果，如下圖所示

用法2（接受同時(shí)進(jìn)行類型限制）：

指定傳進(jìn)來的參數(shù)的類型，這里假如傳進(jìn)來類型和指定的類型不一樣時(shí)會(huì)優(yōu)先以傳進(jìn)來的類型為準(zhǔn)，并給出警告。

用法3(接受同時(shí)類型限制+默認(rèn)值指定)：

指定類型后還有兩個(gè)選項(xiàng)，一個(gè)是指定是否必要，一個(gè)是沒有傳時(shí)的默認(rèn)值

注意：

傳進(jìn)來props元素是不能更改的，否則會(huì)報(bào)錯(cuò)，如果需要修改應(yīng)該用一個(gè)新的變量去接受它再修改，如下圖所示，因?yàn)閜rops的優(yōu)先級(jí)是高于return的，所以this.age的內(nèi)容會(huì)提前準(zhǔn)備好 

另外，經(jīng)過測(cè)試，這個(gè)方法只能在data里面用，無(wú)法在setup里面用

emit的使用

setup里面有兩個(gè)參數(shù)props和context

如下圖所示，其中props就是和上面說的一樣時(shí)父組件向子組件傳遞的信息，如右下圖所示

現(xiàn)在重點(diǎn)來到emit，emit是context中的一個(gè)東西

作用:用來觸發(fā)父組件里面綁定的函數(shù)并可以傳參回父組件

如圖父組件APP.vue里面的配置，在子組件<StDent/>標(biāo)簽里面綁定了一個(gè)函數(shù)xxx，并傳了一個(gè)參數(shù)xxx1給了子組件。 并且綁定的函數(shù)xxx1還有一個(gè)參數(shù)要輸入。

 此時(shí)來到子組件這里，子組件里面用一個(gè)按鈕綁定了一個(gè)事件用來觸發(fā)父組件的事件xxx1并且傳了一個(gè)字符串“++”回去，

 最終得到以下的效果,每點(diǎn)擊一次子組件StDent里面的按鈕，父組件里面的一個(gè)字符串屬性就會(huì)自動(dòng)添加兩個(gè)+并顯示出來 

emit總結(jié)：經(jīng)過上述例子，我們只需要知道emit是可以讓子組件去觸發(fā)父組件的函數(shù)這一點(diǎn)就夠了

總結(jié)

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

最新評(píng)論