問(wèn)題描述:
將button封裝成MyBtn組件后,在導(dǎo)入使用時(shí),<MyBtn/>的click點(diǎn)擊事件失效
封裝的MyBtn組件=》MyBtn.vue
<button>
<slot/>
</button>
在其他地方使用MyBtn組件
// 會(huì)發(fā)現(xiàn)點(diǎn)擊事件失效了
<MyBtn @click="createTag">新建標(biāo)簽</MyBtn>
導(dǎo)致原因:
我們監(jiān)聽(tīng)的點(diǎn)擊事件是MyBtn的卫玖,但用戶(hù)點(diǎn)擊的是封裝的MyBtn組件內(nèi)的小button,因此無(wú)法觸發(fā)事件
解決方法:
方法1:在封裝的組件內(nèi),通過(guò)$emit的方法梳虽,將事件信息傳遞給MyBtn,其他地方就可以正常觸發(fā)click事件了
MyBtn.vue
<button @click="$emit('click',$event)">
<slot/>
</button>
方法2:
在使用MyBtn組件的地方為click事件添加.native灾茁,激活點(diǎn)擊事件窜觉,使用這種方式時(shí)MyBtn組件內(nèi)不必進(jìn)行配置
<MyBtn class="addBtn" @click.native="createTag">新建標(biāo)簽</MyBtn>