久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

07
2023/04

Vue自定義組件中$emit的用法

發(fā)布時間:2023-04-07 18:22:45
發(fā)布者:MaiMai
瀏覽量:
0

上一篇我們說到,props是組件的自定義屬性,組件的使用者可以通過props把數(shù)據(jù)傳遞到子組件內(nèi)部,那么如果要將子組件的值傳遞到組件外呢?

 

我們可以使用this.$emit函數(shù)實現(xiàn)。

 

對于$emit的用法可以總結(jié)為以下兩點:

1. 子組件通過$emit的方式,調(diào)用父組件中的事件

2. $emit函數(shù)只能在子組件中使用

 

我們來看個例子。

image.png

 

如圖,我們先在自定義組件中,將按鈕的點擊事件定義為myclick事件進行傳遞,使用此組件后可以直接用myclick事件名來監(jiān)聽。這樣,我們便可以調(diào)用父組件的事件,并執(zhí)行appfunc函數(shù)。

 

此外,$emit方法在傳遞事件的時候也可以傳遞參數(shù)。

 

image.png

 

 

這里的邏輯是,當(dāng)子組件被點擊時,觸發(fā)myclick事件,之后執(zhí)行$emit函數(shù),會調(diào)用父組件中的appfunc方法,同時將title的值作為參數(shù)傳過去,頁面上打印出傳遞的title值。

1680863241300.png

關(guān)鍵詞:
返回列表