Vue3中props和emit怎么使用

這篇文章主要介紹“Vue3中props和emit怎么使用”，在日常操作中，相信很多人在Vue3中props和emit怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue3中props和emit怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

作用：父組件通過 props 向下傳遞數據給子組件；

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

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

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

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

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

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

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

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

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

注意：

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

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

emit的使用

setup里面有兩個參數props和context

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

現在重點來到emit，emit是context中的一個東西

作用:用來觸發父組件里面綁定的函數并可以傳參回父組件

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

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

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

emit總結：經過上述例子，我們只需要知道emit是可以讓子組件去觸發父組件的函數這一點就夠了

到此，關于“Vue3中props和emit怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！