详解Vue2.0之去掉组件click事件的native修饰
更新时间：2017年04月20日 09:30:56 作者：烈风裘
这篇文章主要介绍了详解Vue2.0之去掉组件click事件的native修饰,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
这个是在组件开发中遇到的问题，当时我在编写button的组件，模板是这样的：
<template>
<button class="disable-hover button ion-button"
:class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">
<span class="button-inner">
<slot></slot>
</span>
<div class="button-effect"></div>
</button>
</template>
使用是这样子的：
<ion-button @click.native="primary()" color="primary">primary</ion-button>
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符，故写法就像上面这样。
好吧，处女座的毛病又来了。像button这样常用的组件如果加上native的话是感觉很突兀的。虽然组件设计有自身的考虑，因此我想将click的native去掉，思路如下：
- 子组件监听父组件给的click事件，
- 子组件内部处理click事件然后向外发送click事件：
$emit("click".fn)
改造后的代码如下(亲测可用)：
<template>
<button class="disable-hover button ion-button" @click="_click"
:class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">
<span class="button-inner">
<slot></slot>
</span>
<div class="button-effect"></div>
</button>
</template>
<script type="text/babel">
export default{
....
....
methods: {
_click: function () {
this.$emit('click', function () {
alert('inner')
})
}
}
}
</script>
父组件中这样使用：
<ion-button @click="primary()" color="primary">primary</ion-button>
也许读者能看出来，我正在参照IONIC2.X的组件API写Vue2.0的功能组件，目前只完成了：ActionSheet、Button、Icon、Alert、Toast这几个，一边看IONIC源码，一边将思路总结写成Vue代码，也就是花点时间。积累自己的组件库希望以后能开发快点。
现在项目地址在这里，前期以实现功能为主，不建议用在生产环境，读读代码实现思路就好，中文备注都做好了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue2和Vue3的10种组件通信方式梳理，本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式，需要的朋友可以参考一下2022-08-08
vue通过v-html指令渲染的富文本无法修改样式的解决方案
这篇文章主要介绍了vue通过v-html指令渲染的富文本无法修改样式的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要为大家介绍了Pinia.js状态管理器上手使用指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vue-extend和vue-component注册一个全局组件方式
这篇文章主要介绍了vue-extend和vue-component注册一个全局组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要给大家介绍了关于vue使用keep-alive后清除缓存的相关资料,这个问题在我们日常工作中经常会用到,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了vux-uploader 图片上传组件的安装及使用方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架，这篇文章主要介绍了基于mpvue的小程序项目搭建的步骤，非常具有实用价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue异步加载dom元素之后无法获得的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue3 使用setup语法糖实现分类管理,本次模块使用 vue3+element-plus 实现一个新闻站的后台分类管理模块，其中新增、编辑采用对话框方式公用一个表单，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue3.0在组件外使用VueI18n的情况，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论