快捷導(dǎo)航

vue3繼承并擴(kuò)展三方組件完成二次封裝的示例詳解

更新時(shí)間：2024年03月18日 08:37:17 作者：首屏加載工程師

這篇文章主要介紹了vue3繼承并擴(kuò)展三方組件完成二次封裝,文章使用naiveui的Input組件進(jìn)行舉例,elementPlus或者其他組件庫(kù)同理,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下

繼承emits和props

<!-- TInput.vue -->
<script setup lang="ts">
//導(dǎo)入三方組件提供的props
import { NInput, inputProps } from 'naive-ui'
//定義props
const props = defineProps(inputProps)
//擴(kuò)展默認(rèn)組件的type類型
const props = defineProps(inputProps)
</script>
<template>
  <NInput v-bind="props" ref="_ref">
  </NInput>
</template>

這樣就能完整的繼承組件的props和emits了在另一個(gè)文件中檢查一下類型是否正確

很完美

擴(kuò)展emits和props呢

我們利用assign方法來(lái)進(jìn)行擴(kuò)展舉個(gè)例子,為placeholder添加一個(gè)前綴,這是原本輸入框的清除按鈕

<!-- TInput.vue -->
<script setup lang="ts">
//導(dǎo)入三方組件提供的props
import { NInput, inputProps } from 'naive-ui'
import { assign } from 'lodash'
import { computed, onMounted, ref } from 'vue'

//擴(kuò)展placeholder的前綴
const props = defineProps(
  assign(inputProps, {
    placeholder: {
      type: String,
      default: 'default-input'
    },
    suffix: {
      type: String,
      default: ''
    }
  })
)

const _placeHolder = computed(() => props?.suffix + props?.placeholder)
</script>
<template>
   <NInput v-bind="props" :placeholder="_placeHolder" ref="_ref"> </NInput>
</template>

//使用TInput組件
<template>

  <TInput v-model:value="val" :suffix="'suffix'"></TInput>

</template>

可以看到我們對(duì) placeholder設(shè)置的前綴生效了

繼承插槽

我們可以通過(guò)useSlots或者$slots來(lái)獲取到接受到的插槽,然后只要簡(jiǎn)單的循環(huán)就能繼承插槽了

<template>
  <NInput v-bind="props" ref="_ref" :placeholder="_placeHolder">
    <template v-for="(_, name) in $slots" #[name]="slotData">
      <slot :name v-bind="slotData || {}"></slot>
    </template>
  </NInput>
</template>

擴(kuò)展插槽

舉個(gè)例子,我想修改NInput默認(rèn)的清除按鈕,但又保留使用插槽修改清除按鈕的功能這是原本的清除按鈕

現(xiàn)在將這個(gè)清除按鈕的默認(rèn)值修改為c 為插槽設(shè)置默認(rèn)值

<template>
   <NInput v-bind="props" ref="_ref" :placeholder="_placeHolder">
    <template #clear-icon><div>c</div></template>
    <template v-for="(_, name) in $slots" #[name]="slotData" :key="name">
      <slot :name v-bind="slotData || {}"></slot>
    </template>
  </NInput>
</template>

當(dāng)我沒(méi)有使用clear-icon的插槽的時(shí)候,可以看到

當(dāng)我使用clear-icon的插槽的時(shí)候

  <TInput v-model:value="val" :suffix="'suffix'" clearable>
    <template #clear-icon>
      <div>q</div>
    </template>
  </TInput>

插槽沒(méi)有類型提示

需要檢查你使用的三方組件是否導(dǎo)出了Slots的類型,然后在defineSlots中使用這個(gè)類型,使用類型工具擴(kuò)展.但是由于組件泛型并不好用.定義slots的類型意義不大. 由于naiveui并沒(méi)有導(dǎo)出Slots的類型,因此這里不做演示

繼承組件實(shí)例提供的方法

繼承組件實(shí)例的方法需要在Mounted的生命周期中,獲取組件實(shí)例并且將其導(dǎo)出

<template>
  <NInput ref="_ref" >
  </NInput>
</template>
<script setup lang="ts">
const _ref = ref()
const _expose: Record<string, any> = {
  getInst: () => {
    return _ref.value
  }
}
defineExpose(_expose)
</script>

在使用TInput組件的時(shí)候引入組件實(shí)例的類型,實(shí)現(xiàn)良好的類型提示

<script setup lang="ts">
import TInput from './components/TInput.vue'
import { onMounted, ref } from 'vue'
import { type InputInst } from 'naive-ui'
const val = ref()
const inputRef = ref< { getInst: () => InputInst }>()
onMounted(() => {
  console.log(inputRef.value?.getInst?.()?.focus())
})
</script>
<template>
  <TInput ref="inputRef" v-model:value="val" :suffix="'suffix'" clearable> </TInput>
</template>

注意,不要使用循環(huán)的方式為expose添加鍵值對(duì),因?yàn)閷?duì)組件實(shí)例的操作會(huì)讓vue提交警告, `void app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead. 因此簡(jiǎn)單的把組件實(shí)例通過(guò)expose的函數(shù)導(dǎo)出即可

到此這篇關(guān)于vue3繼承并擴(kuò)展三方組件完成二次封裝的示例詳解的文章就介紹到這了,更多相關(guān)vue3繼承并擴(kuò)展三方組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: