Vue3?Composition?API怎么優(yōu)雅封裝第三方組件

本篇內(nèi)容介紹了“Vue3 Composition API怎么優(yōu)雅封裝第三方組件”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

前言

對(duì)于第三方組件，如何在保持第三方組件原有功能（屬性props、事件events、插槽slots、方法methods）的基礎(chǔ)上，優(yōu)雅地進(jìn)行功能的擴(kuò)展了？

以Element Plus的el-input為例：

很有可能你以前是這樣玩的，封裝一個(gè)MyInput組件，把要使用的屬性props、事件events和插槽slots、方法methods根據(jù)自己的需要再寫一遍：

// MyInput.vue
<template>
  <div class="my-input">
    <el-input v-model="inputVal" :clearable="clearable" @clear="clear">
    <template #prefix>
      <slot name="prefix"></slot>
    </template>
      <template #suffix>
      <slot name="suffix"></slot>
    </template>
    </el-input>
  </div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  clearable: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:modelValue', 'clear'])
const inputVal = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits('update:modelValue', val)
  }
})
const clear = () => {
  emits('clear')
}
</script>

可過一段時(shí)間后，需求變更，又要在MyInput組件上添加el-input組件的其它功能，可el-input組件總共有20個(gè)多屬性，5個(gè)事件，4個(gè)插槽，那該怎么辦呢，難道一個(gè)個(gè)傳進(jìn)去，這樣不僅繁瑣而且可讀性差。

在Vue2中，我們可以這樣處理，點(diǎn)擊此處查看 封裝Vue第三方組件

此文詣在幫助大家做一個(gè)知識(shí)的遷移，探究如何使用Vue3 CompositionAPI優(yōu)雅地封裝第三方組件~

一、對(duì)于第三方組件的屬性props、事件events

在Vue2中

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

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

而在Vue3中

• $attrs:包含了父作用域中不作為組件 props 或自定義事件的 attribute 綁定和事件（包括 class 和 style和自定義事件），同時(shí)可以通過 v-bind="$attrs" 傳入內(nèi)部組件。

• $listeners 對(duì)象在 Vue 3 中已被移除。事件監(jiān)聽器現(xiàn)在是 $attrs 的一部分。

• 在 <script setup>中輔助函數(shù)useAttrs可以獲取到$attrs。

//MyInput.vue 
<template>
  <div class="my-input">
    <el-input v-bind="attrs"></el-input>
  </div>
</template>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>

當(dāng)然，這樣還不夠。光這樣寫，我們綁定的屬性（包括 class 和 style）同時(shí)會(huì)在根元素（上面的例子是class="my-input"的Dom節(jié)點(diǎn)）上起作用。要阻止這個(gè)默認(rèn)行為，我們需要設(shè)置inheritAttrs為false。

下面我們來看看Vue3文檔對(duì)inheritAttrs的解釋

默認(rèn)情況下父作用域的不被認(rèn)作 props 的 attribute 綁定 (attribute bindings) 將會(huì)“回退”且作為普通的 HTML attribute 應(yīng)用在子組件的根元素上。當(dāng)撰寫包裹一個(gè)目標(biāo)元素或另一個(gè)組件的組件時(shí)，這可能不會(huì)總是符合預(yù)期行為。通過設(shè)置 inheritAttrs 到 false，這些默認(rèn)行為將會(huì)被去掉。而通過實(shí)例 property $attrs 可以讓這些 attribute 生效，且可以通過 v-bind 顯性的綁定到非根元素上。

于是，我們對(duì)于第三方組件的屬性props、事件events處理，可以寫成如下代碼：

// MyInput.vue 
<template>
  <div class="my-input">
    <el-input v-bind="attrs"></el-input>
  </div>
</template>
<script>
export default {
  name: 'MyInput',
  inheritAttrs: false
}
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>

二、對(duì)于第三方組件的插槽slots

Vue3中

• $slots：我們可以通過其拿到父組件傳入的插槽

• Vue3中移除了$scopedSlots，所有插槽都通過 $slots 作為函數(shù)暴露

• 在 <script setup>中輔助函數(shù)useSlots可以獲取到$slots。

基于以上幾點(diǎn)，如果我們對(duì)于第三方組件的封裝沒有增加額外的插槽，且第三方組件的插槽處于同一個(gè)dom節(jié)點(diǎn)之中，我們也有一種取巧的封裝方式????, 通過遍歷$slots拿到插槽的name，動(dòng)態(tài)添加子組件的插槽：

//MyInput.vue 
<template>
  <div class="my-input">
    <el-input v-bind="attrs">
      <template v-for="k in Object.keys(slots)" #[k] :key="k">
        <slot :name="k"></slot>
      </template>
    </el-input>
  </div>
</template>
<script>
export default {
  name: 'MyInput',
  inheritAttrs: false
}
</script>
<script setup>
import { useAttrs, useSlots } from 'vue'
const attrs = useAttrs()
const slots = useSlots()
</script>

如果不滿足以上條件的話，咱還得老老實(shí)實(shí)在子組件中手動(dòng)添加需要的第三方組件的插槽~

三、對(duì)于第三方組件的方法methods

對(duì)于第三方組件的方法，我們通過ref來實(shí)現(xiàn)。首先在MyInput組件中的el-input組件上添加一個(gè)ref="elInputRef"屬性，然后通過defineExpose把elInputRef暴露出去給父組件調(diào)用。

子組件：MyInput.vue

// MyInput.vue 
<template>
  <div class="my-input">
    <el-input v-bind="attrs" ref="elInputRef">
      <template v-for="k in Object.keys(slots)" #[k] :key="k">
        <slot :name="k"></slot>
      </template>
    </el-input>
  </div>
</template>
<script>
export default {
  name: 'MyInput',
  inheritAttrs: false
}
</script>
<script setup>
import { useAttrs, useSlots } from 'vue'
const attrs = useAttrs()
const slots = useSlots()
const elInputRef = ref(null)
defineExpose({
  elInputRef  // <script setup>的組件里的屬性默認(rèn)是關(guān)閉的，需通過defineExpose暴露出去才能被調(diào)用
})
</script>

父頁(yè)面：Index.vue的調(diào)用代碼如下：

// Index.vue 
<template>
  <my-input v-model='input' ref="myInput">
    <template #prefix>姓名</template>
  </my-input>
</template>
<script setup>
import MyInput from './components/MyInput.vue'
import { ref, onMounted } from 'vue'
const input = ref('')
const myInput = ref(null) // 組件實(shí)例
onMounted(()=> {
  myInput.value.elInputRef.focus() // 初始化時(shí)調(diào)用elInputRef實(shí)例的focus方法
})
</script>

“Vue3 Composition API怎么優(yōu)雅封裝第三方組件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！