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

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

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

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

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

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

用法2（接受同時進行類型限制）：

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

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

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

注意：

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

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

emit的使用

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

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

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

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

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

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

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

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

總結(jié)

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

最新評論