快捷導(dǎo)航

前端框架之封裝Vue第三方組件三個(gè)技巧

更新時(shí)間：2022年07月11日 16:03:14 作者：紅塵煉心

這篇文章主要為大家介紹了前端框架封裝Vue第三方組件的三個(gè)技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

在封裝第三方組件中，經(jīng)常會(huì)遇到一個(gè)問(wèn)題，如何通過(guò)封裝的組件去使用第三方組件的Attributes(屬性)、Events(自定義事件)、Methods(方法)、Slots(插槽)。

當(dāng)然這個(gè)問(wèn)題并不是難以解決，用普通方法解決難免陷入繁瑣重復(fù)的工作中，而且封裝的組件代碼可讀性也不高。

本專欄將介紹三種技巧來(lái)使用第三方組件的Attributes(屬性)、Events(自定義事件)、Slots(插槽)，至于使用第三方組件的Methods(方法)的技巧還待優(yōu)化。

一、使用第三方組件的屬性

封裝一個(gè)elementUI的el-input輸入框組件稱為myInput，若要在myInput組件上添加一個(gè)disabled屬性來(lái)禁用輸入框，要如何實(shí)現(xiàn)呢？一般同學(xué)會(huì)這么做

//myInput.vue
<template>
  <div>
    <el-input v-model="inputVal" :disabled="disabled"></el-input>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
}
</script>

過(guò)一段時(shí)間后又要在myInput組件上添加el-input組件的其它屬性，el-input組件總共有27個(gè)多屬性，那該怎么呢，難道一個(gè)個(gè)用prop傳進(jìn)去，這樣不僅繁瑣而且可讀性差，可以用$attrs一步到位，先來(lái)看一下attrs的官方定義。

$attrs: 包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的 attribute 綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒(méi)有聲明任何prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過(guò) v-bind="$attrs" 傳入內(nèi)部組件

//myInput.vue
<template>
  <div>
    <el-input v-model="input" v-bind="$attrs"></el-input>
  </div>
</template>

這還不夠，還得把inheritAttrs選項(xiàng)設(shè)置為false，為什么呢，來(lái)看一下inheritAttrs選項(xiàng)的官方定義就明白了。

默認(rèn)情況下父作用域的不被認(rèn)作 props 的 attribute 綁定 (attribute bindings) 將會(huì)“回退”且作為普通的 HTML attribute 應(yīng)用在子組件的根元素上。當(dāng)撰寫(xiě)包裹一個(gè)目標(biāo)元素或另一個(gè)組件的組件時(shí)，這可能不會(huì)總是符合預(yù)期行為。

通過(guò)設(shè)置 inheritAttrs 為 false，這些默認(rèn)行為將會(huì)被去掉。而通過(guò) $attrs 可以讓這些 attribute 生效，且可以通過(guò) v-bind 顯性的綁定到非根元素上。注意：這個(gè)選項(xiàng)不影響 class 和 style 綁定。

簡(jiǎn)單來(lái)說(shuō)，把inheritAttrs設(shè)置為false，避免給myInput組件設(shè)置的屬性被添加到myInput組件的根元素div上。

//myInput.vue
<template>
  <div>
    <el-input v-model="input" v-bind="$attrs"></el-input>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
}
</script>

這樣設(shè)置后，在myInput組件上就可以直接使用el-input組件的屬性，不管后續(xù)el-input組件再增加了多少個(gè)屬性。

二、使用第三方組件的自定義事件

若在myIpput組件上使用el-input組件上自定義的事件呢，可能你的第一反應(yīng)是this.$emit。

//myInput.vue
<template>
  <div>
    <el-input v-model="input" v-bind="$attrs" @blur="blur"></el-input>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    blur() {
      this.$emit('blur')
    }
  }
}
</script>

<myInput v-model="value" @blur="handleBlur"></myInput>

el-input組件有4個(gè)自定義事件，還不算多，假如遇到自定義事件更多的第三方組件，要怎么辦，難道一個(gè)一個(gè)添加進(jìn)去，這樣會(huì)增加一堆非必要的methods，其實(shí)可以用$listeners一步到位，先來(lái)看一下$listeners的官方定義。

$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件。

//myInput.vue
<template>
  <div>
    <el-input v-model="input" v-bind="$attrs" v-on="$listeners"></el-input>
  </div>
</template>

那么在myInput組件中給el-input組件添加上v-on="$listeners"，就可以在myInput組件上使用el-input組件自定義的事件。

三、使用第三方組件的插槽

若在myIpput組件上使用el-input組件上定義的插槽呢？這個(gè)沒(méi)有多少取巧的方法，第三方組件定義多少個(gè)插槽，在封裝的時(shí)候都得用slot標(biāo)簽暴露出去。比如暴露el-input組件中的prefix插槽，代碼如下所示：

//myInput.vue
<template>
  <div>
    <el-input v-model="input" v-bind="$attrs" @blur="blur">
      <template #prepend>
        <slot name="prepend"></slot>
      </template>
    </el-input>
  </div>
</template>

四、使用第三方組件的方法

利用ref來(lái)實(shí)現(xiàn)，首先在myInput組件中的el-input組件上添加一個(gè)ref="elInput"屬性，

//myInput.vue
<template>
  <div>
    <el-input ref="elInput></el-input>
  </div>
</template>
<script>
export default {
  mounted(){
     this.elInput = this.$refs.elInput;
  }
}
</script>

這里要注意父子組件的mounted的執(zhí)行時(shí)機(jī)，因?yàn)橐话鉫l-input組件是全局引入的，相當(dāng)同步引入組件，此時(shí)el-input組件的mounted會(huì)比myInput組件的mounted先執(zhí)行，所以可以在myInput組件的mounted中把this.$refs.elInput賦值到myInput組件的this的一個(gè)屬性上。

myInput組件如何使用el-input組件的方法分兩種情況，跟myInput組件的引入有關(guān)系。

假如myInput組件是同步引入的

<template>
  <div>
    <myInput ref="myInput"></myInput>
  </div>
</template>
<script>
import myInput from './myInput.vue';
export default {
  data() {
    return {
    }
  },
  components: {
    myInput,
  },
  mounted() {
    //調(diào)用el-input組件的focus方法
    this.$refs.myInput.elInput.focus();
  }
}
</script>

假如myInput組件是異步引入的

<template>
  <div>
    <myInput ref="myInput"></myInput>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  components: {
    myInput: () => import('./myInput.vue')
  },
  mounted() {
    //調(diào)用el-input組件的focus方法
    setTimeout(() => {
       this.$refs.myInput.elInput.focus();
    })
  }
}
</script>

以上就是前端框架封裝Vue第三方組件三個(gè)技巧的詳細(xì)內(nèi)容，更多關(guān)于封裝Vue第三方組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: