详解Vue2.0之去掉组件click事件的native修饰


Posted in Javascript onApril 20, 2017

这个是在组件开发中遇到的问题,当时我在编写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去掉,思路如下:

  1. 子组件监听父组件给的click事件,
  2. 子组件内部处理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代码,也就是花点时间。积累自己的组件库希望以后能开发快点。

现在项目地址在这里,前期以实现功能为主,不建议用在生产环境,读读代码实现思路就好,中文备注都做好了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
JS上传前预览图片实例
Mar 25 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 #Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 #Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 #Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 #Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 #Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 #Javascript
基于JavaScript实现活动倒计时效果
Apr 20 #Javascript
You might like
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP7 新增常量
2021/03/09 PHP
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
JQuery球队选择实例
2015/05/18 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
python中K-means算法基础知识点
2021/01/25 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
便利店的创业计划书
2014/01/15 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
廉洁校园实施方案
2014/05/25 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
办公室主任岗位职责
2015/01/31 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
小学运动会开幕词
2016/03/04 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis