快捷導(dǎo)航

Vue3實現(xiàn)組件二次封裝的小技巧分享

更新時間：2024年09月12日 09:01:21 作者：唐詩

組件的二次封裝：保留組件已有的功能,需要重寫組件方法,當組件已有大量功能時候,則需要重寫很多重復(fù)代碼,且組件功能進行修改的時候,封裝的組件也需要對應(yīng)修改,從而造成許多開發(fā)和維護成本,本文給大家分享了Vue3實現(xiàn)組件二次封裝的小技巧,需要的朋友可以參考下

雙向數(shù)據(jù)綁定

我們以 input 組件作為例子

雙向數(shù)據(jù)綁定的原理及實現(xiàn)想必大家已經(jīng)爛熟于心了直接看官網(wǎng)吧!

子組件接受一個 modelValue 的 prop, 通過 emit 觸發(fā) update:modelValue 事件完成數(shù)據(jù)的更新

父組件直接 v-model="xxxx"

嫌麻煩官方還提供了 defineModel() 用于簡化上邊的步驟

向子組件傳遞插槽

我們以 input 組件作為例子,創(chuàng)建一個 WrapInput.vue 組件

未學(xué)習(xí)之前

WrapInput.vue 常規(guī)的做法,遍歷 $slots 來實現(xiàn)

<script setup lang="ts">
const model = defineModel()

</script>

<template>
  <el-input v-model="model" placeholder="Please input" >
    <template v-for="(_, slot) in $slots" :key="solt" v-slot:[slot]="slotProps">
      <slot :name="slot" v-bind="slotProps"></slot>
    </template>
  </el-input>
</template>

<style lang='scss' scoped></style>

在 app.vue 中引入并傳遞 prepend、append 插槽

<script setup lang="ts">
import { ref } from "vue";
import WrapInput from "./components/WrapInput.vue";

const inputText = ref('')
</script>

<template>
  <WrapInput v-model="inputText">
    <template #prepend>Http://</template>
    <template #append>.com</template>
  </WrapInput>

  <div>
    {{inputText}}
  </div>
</template>

<style scoped>
</style>

正確渲染了插槽

學(xué)習(xí)之后

讓我們來修改下 WrapInput.vue

<script setup lang="ts">
import { h } from "vue";
import { ElInput } from "element-plus";
const model = defineModel()
</script>

<template>
<component :is="h(ElInput, $attrs, $slots)" v-model="model"></component>
</template>

<style lang='scss' scoped></style>

app.vue 的代碼不做任何修改

插槽正常傳遞、數(shù)據(jù)更新正常,看到這種寫法的時候有點震驚的

component 組件為什么可以傳入 h 函數(shù)

看下 h 函數(shù)的文檔, h(ElInput, $attrs, $slots) 是創(chuàng)建了一個虛擬 dom 節(jié)點

而 component 組件的 is 屬性則可以接收

被注冊的組件名
導(dǎo)入的組件對象
一個返回上述值之一的函數(shù)

當 component 組件的 is 屬性接收到一個函數(shù)時，Vue 會調(diào)用這個函數(shù)并使用其返回值作為要渲染的組件。

在這種情況下，h(ElInput, $attrs, $slots) 會立即執(zhí)行并返回一個 VNode，這個 VNode 描述了如何渲染 ElInput 組件。

獲取子組件的 ref

未學(xué)習(xí)之前

之前的自己的寫法有點蠢的具體的做法是在子組件創(chuàng)建一個 getRef 的函數(shù)把 ref 暴露出去,父組件調(diào)用 getRef 方法后在執(zhí)行子組件方法的調(diào)用,大概是下邊這樣

WrapInput1.vue

<script setup lang="ts">
import { h, ref} from "vue";
import { ElInput } from "element-plus";
const model = defineModel()

const inputRef = ref()

function getRef () {
  return inputRef.value
}

defineExpose({
  getRef
})
</script>

<template>
  <component ref="inputRef" :is="h(ElInput, $attrs, $slots)" v-model="model"></component>
</template>

<style lang='scss' scoped></style>

學(xué)習(xí)之后

WrapInput.vue

<script setup lang="ts">
import { h, ref } from "vue";
import { ElInput } from "element-plus";
const model = defineModel()

const inputRef = ref()

defineExpose(new Proxy({}, {
  get(_target, prop)  {
    return inputRef.value?.[prop]
  },
  has (_target, prop) {
    return prop in inputRef.value
  }
}))

</script>

<template>
  <component :is="h(ElInput, $attrs, $slots)" v-model="model" ref="inputRef"></component>
</template>

<style lang='scss' scoped></style>

使用 Proxy 代理暴露出去的方法,是有點震驚的,還能這么寫

App.vue

<script setup lang="ts">
import { ref } from "vue";
import WrapInput from "./components/WrapInput.vue";

const inputText = ref('')

const prependSlotText =  ref('Http://')
const appendSlotText =  ref('.com')

function updateSlotInfo (){
  prependSlotText.value = 'https://'
  appendSlotText.value = `${new Date().getTime()}`
}

const wrapInputRef = ref()
function setWrapInputFocus () {
  wrapInputRef.value?.focus()
}
</script>

<template>
  <WrapInput v-model="inputText" ref="wrapInputRef">
    <template #prepend>{{ prependSlotText }}</template>
    <template #append>{{ appendSlotText }}</template>
  </WrapInput>

  <div style="margin: 20px 0;">
    {{inputText}}
  </div>

  <el-button type="primary" @click="updateSlotInfo">更新插槽內(nèi)容</el-button>
  <el-button type="primary" @click="setWrapInputFocus">set input focus</el-button>
  
</template>

<style scoped>
</style>

調(diào)用組件的 focus 方法讓 WrapInput.vue 組件獲取焦點