button组件封装后原button的click事件不生效的问题

问题描述:
将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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容