詳解關(guān)于element el-button使用$attrs的一個注意要點(diǎn)
之前需要對 el-button
做二次封裝,所以就用到 vue
的 $attrs
和 $listeners
屬性,這兩個屬性在這不細(xì)說,可以在這里 查看詳情。
二次封裝代碼(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)識 buttonId: { type: String, required: true, }, }, computed: { ...mapGetters(['getUserBtns']), validButton: function() { return env.debug ? true : this.getUserBtns[this.buttonId]; }, }, }; </script>
這樣封裝的好處就是不需要將上層每個屬性都寫一次 prop
定義,對 listeners
也不需要做一層中轉(zhuǎn) emit
。
發(fā)現(xiàn)問題
在某個頁面,點(diǎn)擊經(jīng)過封裝的 limit-button
會使頁面進(jìn)行刷新
起初以為是點(diǎn)擊事件的冒泡產(chǎn)生的,就把上層引用的 @click
去掉:
<limit-button type="warning" size="small" buttonId="2345434fg" > 點(diǎn)擊 </limit-button>
發(fā)現(xiàn)還是一樣會產(chǎn)生刷新的事件。
思考可能是 $listeners
的問題,在 mounted
中打印也只有 @click
事件,就算去掉 $listeners
也不管用。 后來在瀏覽器對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
問題簡化重現(xiàn)
<el-form ref="form" :model="form" label-width="80px"> <el-form-item> <button type="primary">點(diǎn)擊會刷新</button> <button type="button" @click="onSubmit">點(diǎn)擊不會刷新</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: { // 按鈕唯一標(biāo)識 buttonId: { type: String, required: true, }, type: { type: String, } }, computed: { ...mapGetters(['getUserBtns']), validButton: function() { return env.debug ? true : this.getUserBtns[this.buttonId]; }, }, }; </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中引入bootstrap.min.css的正確姿勢分享
這篇文章主要介紹了Vue中引入bootstrap.min.css的正確姿勢,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue @click與@click.native,及vue事件機(jī)制的使用分析
這篇文章主要介紹了vue @click與@click.native,及vue事件機(jī)制的使用分析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總(推薦)
dhtmlxGantt一個功能豐富的甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式,這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總,需要的朋友可以參考下2023-03-03Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動條位置(推薦)
這篇文章主要介紹了Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動條位置,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12Vue實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何溧陽Vue實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02Vue項(xiàng)目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09