详解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 相关文章推荐
onpropertypchange
Jul 01 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
JavaScript实现复选框全选功能
Apr 11 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
调频问题解答
2021/03/01 无线电
用PHP创建PDF中文文档
2006/10/09 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
vue组件学习教程
2017/09/09 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Python实现处理管道的方法
2015/06/04 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
独特的python循环语句
2016/11/20 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python 内置模块详解
2019/01/01 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
python 两种方法删除空文件夹
2020/09/29 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
急诊科护士自我鉴定
2013/10/14 职场文书
汽车驾驶求职信
2013/10/25 职场文书
个人求职信范例
2014/01/29 职场文书
大型会议策划方案
2014/05/17 职场文书
文明班级申报材料
2014/12/24 职场文书
资产移交协议书
2016/03/24 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS