前言

在開(kāi)發(fā)Vue項(xiàng)目我們一般使用第三方UI組件庫(kù)進(jìn)行開(kāi)發(fā)，如element-plus, @arco-design/web-Vue, naive-ui等, 但是這些組件提供的接口并不一定滿(mǎn)足我們的需求，這時(shí)我們可以通過(guò)對(duì)組件庫(kù)組件的二次封裝，來(lái)滿(mǎn)足我們特殊的需求。

對(duì)于封裝組件有一個(gè)大原則就是我們應(yīng)該盡量保持原有組件的接口，除了我們需要封裝的功能外，我們不應(yīng)該改變?cè)薪M件的接口，即保持原有組件提供的接口如props,events,slots等不變。

為了實(shí)現(xiàn)這一原則我們就需要將新組件的接口與舊組件的接口一一對(duì)應(yīng), 當(dāng)然我們可以通過(guò)在新組件中一一聲明對(duì)應(yīng)的接口來(lái)實(shí)現(xiàn)（或者只實(shí)現(xiàn)我們目前需要用到的接口）但這種辦法雖然簡(jiǎn)單但看起來(lái)卻極其很繁瑣, 有沒(méi)有一種方法可以實(shí)現(xiàn)props,events,slots的自動(dòng)透?jìng)髂兀?/p>

透?jìng)?Attribute

我們可以使用一個(gè)沒(méi)有參數(shù)的 v-bind來(lái)實(shí)現(xiàn)props,events的透?jìng)鳎?它會(huì)將一個(gè)對(duì)象的所有屬性都作為 attribute 應(yīng)用到目標(biāo)元素或組件上, 這在官方文檔中有著詳細(xì)介紹。

<BaseButton v-bind="$attrs"/>

其中$attrs包含組件可以透?jìng)鲗傩缘膶?duì)象, 透?jìng)鲗傩园╬rops,events, class,style,id等。(不包含接收組件顯式聲明的 props、emits以及slots )

如下,是一個(gè)封裝el-input的默認(rèn)可清空的的組件，由于我們已經(jīng)在defineProps聲明過(guò)clearable, 所以此時(shí)我們需要顯性傳遞clearable屬性

<template>
  <div class="my-input">
    {{ label }}
    <el-input v-bind="$attrs" :clearable="clearable"></el-input>
  </div>
</template>

<script setup>
defineProps({
  label: String,
  clearable: {
    type: Boolean,
    default: true,
  },
});
</script>

如果我們不希望透?jìng)髂承傩员热鏲lass, 我們可以通過(guò)useAttrs來(lái)實(shí)現(xiàn)

<template>
  <div class="my-input">
    {{ label }}
    <el-input v-bind="filteredAttrs" :clearable="clearable"></el-input>
  </div>
</template>

<script setup>
import { computed, useAttrs } from 'Vue';

defineProps({
  label: String,
  clearable: {
    type: Boolean,
    default: true,
  },
});

const attrs = useAttrs();
const filteredAttrs = computed(() => {
  return { ...attrs, class: undefined };
});
</script>

上述封裝的組件還有個(gè)缺點(diǎn), 就是我們將無(wú)法使用el-input本身提供的slot,下面我們就來(lái)實(shí)現(xiàn)一個(gè)可以透?jìng)?slot的組件

透?jìng)?slot

slot可以通過(guò)下面這種方式透?jìng)鞯?/p>

<!-- 在組件中創(chuàng)建新的對(duì)應(yīng)名稱(chēng)的插槽 -->
<template #slotName>
<!-- 在插槽內(nèi)部使用對(duì)應(yīng)名稱(chēng)的插槽 -->
    <slot name="slotName" />
</template>

普通slot

如果透?jìng)鞯膕lot比較少，我們可以通過(guò)在封裝組件內(nèi)部定義并使用插槽<template v-slot:slotName><slot name="slotName" /></template>來(lái)透?jìng)鞑宀?/p>

<template #slotName>
    <slot name="slotName" />
</template>

動(dòng)態(tài)插槽名

如果需要透?jìng)鞯膕lot不固定或者較多，我們可以通過(guò)動(dòng)態(tài)插槽名稱(chēng)透?jìng)?/p>

<template #[slotName] v-for="(slot, slotName) in $slots" >
    <slot :name="slotName" />
</template>

如下是一個(gè)透?jìng)鞯膕lot的el-input組件

<template>
  <div class="my-input">
    {{ label }}
    <el-input v-bind="$attrs" :clearable="clearable">
      <template #[slotName] v-for="(slot, slotName) in $slots">
          <slot :name="slotName" />
      </template>
    </el-input>
  </div>
</template>

<script setup>
defineProps({
  label: String,
  clearable: {
    type: Boolean,
    default: true,
  },
});
</script>

作用域插槽

如果需要封裝組件使用了作用域插槽，我們可以通過(guò)<template v-slot:slotName="slotProps"><slot name="slotName" v-bind="slotProps"/></template>來(lái)透?jìng)髯饔糜虿宀鄄宀邸?/p>

<template #[slotName]="slotProps" v-for="(slot, slotName) in $slots" >
    <slot :name="slotName" v-bind="slotProps"/>
</template>

封裝組件存在的問(wèn)題

組件實(shí)例屬性和方法的調(diào)用

封裝后的組件我們無(wú)法按照之前的情況調(diào)用組件實(shí)例中的屬性和方法，比如BaseButton有focus方法,在封裝之前我們可以通過(guò)下面這種方式調(diào)用

// 調(diào)用BaseButton的組件父組件
// <BaseButton ref="button">
const button = ref();
button.value.focus()

對(duì)于封裝后的組件，由于此時(shí)button指向我們的MyButton,并不指向BaseButton的實(shí)例，所以我們需要在包裝的組件中聲明并暴露BaseButton事例

//我們封裝的組件
// MyButton.Vue
// <BaseButton ref="button">
const button = ref();

注意如果我們使用 <script setup>，是沒(méi)辦法訪問(wèn)實(shí)例中的屬性的，詳情參考vuejs.org/api/sfc-scr…

此時(shí)可以通過(guò)defineExpose顯式公開(kāi)ref屬性

// 我們封裝的組件
// MyButton.Vue
// <BaseButton ref="button">
const button = ref();
defineExpose({
  button
});

然后在父組件中我就可以通過(guò)實(shí)例鏈?zhǔn)秸{(diào)用封裝的組件了

// <MyButton ref="button">
const button = ref();
button.value.button.focus()

總結(jié)

到此這篇關(guān)于Vue組件二次封裝的一些實(shí)用技巧的文章就介紹到這了,更多相關(guān)Vue組件二次封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論