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裡面的配置，在子元件標籤裡面綁定了一個函數xxx，並傳了一個參數xxx1給了子組件。 且綁定的函數xxx1還有一個參數要輸入。

 此時來到子元件這裡，子元件裡面用一個按鈕綁定了一個事件用來觸發父元件的事件xxx1並且傳了一個字串「」回去，

####### 最終得到以下的效果,每點一次子元件StDent裡面的按鈕，父元件裡面的一個字串屬性就會自動加入兩個並顯示出來 ###

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

以上是Vue3中props和emit怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！