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

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

用法1（不指定類型的簡單接受）:

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

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

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

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

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

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

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

注意：

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

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

emit的使用

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

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

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

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

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

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

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

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

總結(jié)

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

最新評論