詳解關(guān)于element el-button使用$attrs的一個(gè)注意要點(diǎn)
之前需要對(duì) el-button 做二次封裝，所以就用到 vue 的 $attrs 和 $listeners 屬性，這兩個(gè)屬性在這不細(xì)說(shuō)，可以在這里 查看詳情。
二次封裝代碼（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: {
// 按鈕唯一標(biāo)識(shí)
buttonId: {
type: String,
required: true,
},
},
computed: {
...mapGetters(['getUserBtns']),
validButton: function() {
return env.debug ? true : this.getUserBtns[this.buttonId];
},
},
};
</script>
這樣封裝的好處就是不需要將上層每個(gè)屬性都寫(xiě)一次 prop 定義，對(duì) listeners 也不需要做一層中轉(zhuǎn) emit 。
發(fā)現(xiàn)問(wèn)題
在某個(gè)頁(yè)面，點(diǎn)擊經(jīng)過(guò)封裝的 limit-button 會(huì)使頁(yè)面進(jìn)行刷新
起初以為是點(diǎn)擊事件的冒泡產(chǎn)生的，就把上層引用的 @click 去掉:
<limit-button type="warning" size="small" buttonId="2345434fg" > 點(diǎn)擊 </limit-button>
發(fā)現(xiàn)還是一樣會(huì)產(chǎn)生刷新的事件。
思考可能是 $listeners 的問(wèn)題，在 mounted 中打印也只有 @click 事件，就算去掉 $listeners 也不管用。 后來(lái)在瀏覽器對(duì)dom結(jié)構(gòu)的查看，發(fā)現(xiàn) limit-button 編譯后變成：
可以看到編譯后的 type 變成了 warning ，查 element 的源碼可發(fā)現(xiàn)
<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>
可發(fā)現(xiàn)是 $attrs 覆蓋了 el-button 的nativeType
問(wèn)題簡(jiǎn)化重現(xiàn)
<el-form ref="form" :model="form" label-width="80px"> <el-form-item> <button type="primary">點(diǎn)擊會(huì)刷新</button> <button type="button" @click="onSubmit">點(diǎn)擊不會(huì)刷新</button> </el-form-item> </el-form>
解決方法
將 type 分出來(lái) props ，然后再通過(guò) 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: {
// 按鈕唯一標(biāo)識(shí)
buttonId: {
type: String,
required: true,
},
type: {
type: String,
}
},
computed: {
...mapGetters(['getUserBtns']),
validButton: function() {
return env.debug ? true : this.getUserBtns[this.buttonId];
},
},
};
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能
這篇文章主要介紹了Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹(shù)和選人功能案例分析
這篇文章主要介紹了Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹(shù)和選人功能,本文通過(guò)案例代碼講解的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了面試官：為什么Vue中的v-if和v-for不建議一起用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
我們?cè)陂_(kāi)發(fā) Vue 項(xiàng)目的時(shí)候會(huì)使用一些前端組件庫(kù),例如 Element、Ant Design 等,這些組件庫(kù)雖然方便,但是也有一些缺點(diǎn),比如內(nèi)置的圖標(biāo)太少,例如我們開(kāi)發(fā)醫(yī)療、財(cái)務(wù)、工程等一些前端項(xiàng)目,內(nèi)置的圖標(biāo)不能滿足我們的需求,所以我們常常在Vue項(xiàng)目中引入SVG圖標(biāo)2024-09-09
用vue和node寫(xiě)的簡(jiǎn)易購(gòu)物車(chē)實(shí)現(xiàn)
這篇文章主要介紹了用vue和node寫(xiě)的簡(jiǎn)易購(gòu)物車(chē)實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
django+vue實(shí)現(xiàn)注冊(cè)登錄的示例代碼
這篇文章主要介紹了django+vue實(shí)現(xiàn)注冊(cè)登錄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
這篇文章主要介紹了vue如何關(guān)閉prettier警告warn問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作
這篇文章主要介紹了vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了vue3的ref,reactive的使用和原理解析,分析了?reactive?的實(shí)現(xiàn)，以及?reactive?api?返回的?proxy?代理對(duì)象使用的?handlers?陷阱，并且對(duì)陷阱中我們最常用的?get?和?set?的源碼進(jìn)行分析，需要的朋友可以參考下2022-09-09