问题描述:
将button封装成MyBtn组件后,在导入使用时,<MyBtn/>的click点击事件失效
封装的MyBtn组件=》MyBtn.vue
<button>
<slot/>
</button>
在其他地方使用MyBtn组件
// 会发现点击事件失效了
<MyBtn @click="createTag">新建标签</MyBtn>
导致原因:
我们监听的点击事件是MyBtn的,但用户点击的是封装的MyBtn组件内的小button,因此无法触发事件
解决方法:
方法1:在封装的组件内,通过$emit的方法,将事件信息传递给MyBtn,其他地方就可以正常触发click事件了
MyBtn.vue
<button @click="$emit('click',$event)">
<slot/>
</button>
方法2:
在使用MyBtn组件的地方为click事件添加.native,激活点击事件,使用这种方式时MyBtn组件内不必进行配置
<MyBtn class="addBtn" @click.native="createTag">新建标签</MyBtn>