上一篇我們說到,props是組件的自定義屬性,組件的使用者可以通過props把數(shù)據(jù)傳遞到子組件內(nèi)部,那么如果要將子組件的值傳遞到組件外呢?
我們可以使用this.$emit函數(shù)實現(xiàn)。
對于$emit的用法可以總結(jié)為以下兩點:
1. 子組件通過$emit的方式,調(diào)用父組件中的事件
2. $emit函數(shù)只能在子組件中使用
我們來看個例子。
如圖,我們先在自定義組件中,將按鈕的點擊事件定義為myclick事件進行傳遞,使用此組件后可以直接用myclick事件名來監(jiān)聽。這樣,我們便可以調(diào)用父組件的事件,并執(zhí)行appfunc函數(shù)。
此外,$emit方法在傳遞事件的時候也可以傳遞參數(shù)。
這里的邏輯是,當(dāng)子組件被點擊時,觸發(fā)myclick事件,之后執(zhí)行$emit函數(shù),會調(diào)用父組件中的appfunc方法,同時將title的值作為參數(shù)傳過去,頁面上打印出傳遞的title值。
上一篇: Vue如何使用自定義組件
下一篇: 組件間傳值的常用方法