详解关于element el-button使用$attrs的一个注意要点


Posted in Javascript onNovember 09, 2018

之前需要对 el-button 做二次封装,所以就用到 vue$attrs$listeners 属性,这两个属性在这不细说,可以在这里 查看详情。

二次封装代码(limit-button)

<template>
 <el-button
   v-show="validButton"
   v-bind="$attrs"
   v-on="$listeners"
 >
  <slot></slot>
 </el-button>
</template>

<script>
import { mapGetters } from 'vuex';
import env from '@/config/env';

export default {
 props: {
  // 按钮唯一标识
  buttonId: {
   type: String,
   required: true,
  },
 },

 computed: {
  ...mapGetters(['getUserBtns']),
  validButton: function() {
   return env.debug ? true : this.getUserBtns[this.buttonId];
  },
 },
};
</script>

这样封装的好处就是不需要将上层每个属性都写一次 prop 定义,对 listeners 也不需要做一层中转 emit

发现问题

在某个页面,点击经过封装的 limit-button 会使页面进行刷新

起初以为是点击事件的冒泡产生的,就把上层引用的 @click 去掉:

<limit-button
  type="warning"
  size="small"
  buttonId="2345434fg"
>
点击
</limit-button>

发现还是一样会产生刷新的事件。

思考可能是 $listeners 的问题,在 mounted 中打印也只有 @click 事件,就算去掉 $listeners 也不管用。 后来在浏览器对dom结构的查看,发现 limit-button 编译后变成:

详解关于element el-button使用$attrs的一个注意要点 

可以看到编译后的 type 变成了 warning ,查 element 的源码可发现

<button
  class="el-button"
  @click="handleClick"
  :disabled="buttonDisabled || loading"
  :autofocus="autofocus"
  :type="nativeType"
  ...
 >
  <i class="el-icon-loading" v-if="loading"></i>
  <i :class="icon" v-if="icon && !loading"></i>
  <span v-if="$slots.default"><slot></slot></span>
</button>

可发现是 $attrs 覆盖了 el-button 的nativeType

问题简化重现

<el-form ref="form" :model="form" label-width="80px">
 <el-form-item>
  <button type="primary">点击会刷新</button>
  <button type="button" @click="onSubmit">点击不会刷新</button>
 </el-form-item>
</el-form>

重现链接

解决方法

type 分出来 props ,然后再通过 prop 引用

<template>
 <el-button
   :type="type"
   v-show="validButton"
   v-bind="$attrs"
   v-on="$listeners"
 >
  <slot></slot>
 </el-button>
</template>

<script>
import { mapGetters } from 'vuex';
import env from '@/config/env';

export default {
 props: {
  // 按钮唯一标识
  buttonId: {
   type: String,
   required: true,
  },
  type: {
    type: String,
  }
 },

 computed: {
  ...mapGetters(['getUserBtns']),
  validButton: function() {
   return env.debug ? true : this.getUserBtns[this.buttonId];
  },
 },
};
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS版网站风格切换实例代码
Oct 06 Javascript
XmlUtils JS操作XML工具类
Oct 01 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
vue前端工程的搭建
Mar 31 Vue.js
webpack4.x CommonJS模块化浅析
Nov 09 #Javascript
angular4笔记系列之内置指令小结
Nov 09 #Javascript
node版本管理工具n包使用教程详解
Nov 09 #Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 #Javascript
vue.js层叠轮播效果的实例代码
Nov 08 #Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 #Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 #Javascript
You might like
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
IE 当eval遇上function的处理
2011/08/09 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
vue.js响应式原理解析与实现
2020/06/22 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
土木工程专业自荐信
2013/10/04 职场文书
函授药学自我鉴定
2014/02/07 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
计划生育个人总结
2015/03/02 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
开学典礼校长致辞
2015/07/29 职场文书
2019个人工作总结
2019/06/21 职场文书