Vue組件二次封裝的實用技巧是什么

這篇文章主要講解了“Vue組件二次封裝的實用技巧是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue組件二次封裝的實用技巧是什么”吧！

透傳 Attribute

我們可以使用一個沒有參數的 v-bind來實現props,events的透傳， 它會將一個對象的所有屬性都作為 attribute 應用到目標元素或組件上, 這在官方文檔中有著詳細介紹。

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

其中$attrs包含組件可以透傳屬性的對象, 透傳屬性包括props,events, class,style,id等。(不包含接收組件顯式聲明的 props、emits以及slots )

如下,是一個封裝el-input的默認可清空的的組件，由于我們已經在defineProps聲明過clearable, 所以此時我們需要顯性傳遞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>

如果我們不希望透傳某些屬性比如class, 我們可以通過useAttrs來實現

<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>

上述封裝的組件還有個缺點, 就是我們將無法使用el-input本身提供的slot,下面我們就來實現一個可以透傳 slot的組件

透傳 slot

slot可以通過下面這種方式透傳的

<!-- 在組件中創建新的對應名稱的插槽 -->
<template #slotName>
<!-- 在插槽內部使用對應名稱的插槽 -->
    <slot name="slotName" />
</template>

普通slot

如果透傳的slot比較少，我們可以通過在封裝組件內部定義并使用插槽<template v-slot:slotName><slot name="slotName" /></template>來透傳插槽

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

動態插槽名

如果需要透傳的slot不固定或者較多，我們可以通過動態插槽名稱透傳

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

如下是一個透傳的slot的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>

作用域插槽

如果需要封裝組件使用了作用域插槽，我們可以通過<template v-slot:slotName="slotProps"><slot name="slotName" v-bind="slotProps"/></template>來透傳作用域插槽插槽。

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

封裝組件存在的問題

組件實例屬性和方法的調用

封裝后的組件我們無法按照之前的情況調用組件實例中的屬性和方法，比如BaseButton有focus方法,在封裝之前我們可以通過下面這種方式調用

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

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

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

注意如果我們使用 <script setup>，是沒辦法訪問實例中的屬性的，詳情參考vuejs.org/api/sfc-scr&hellip;

此時可以通過defineExpose顯式公開ref屬性

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

然后在父組件中我就可以通過實例鏈式調用封裝的組件了

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

感謝各位的閱讀，以上就是“Vue組件二次封裝的實用技巧是什么”的內容了，經過本文的學習后，相信大家對Vue組件二次封裝的實用技巧是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！