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