详解关于element el-button使用$attrs的一个注意要点
之前需要对 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
编译后变成:
可以看到编译后的 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)