我們時常會想在保持第三方組件原有功能（屬性props、事件events、插槽slots、方法methods）的基礎上，這些功能如何“優化”的實現？

　　以Element Plus的el-input為例：

　　在封裝一個MyInput組件，把要使用的屬性props、事件events和插槽slots、方法methods先要依照自己的需求來編寫：　

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

　  但當需求發生變動，此時又要在MyInput組件上添加el-input組件的其它功能，可el-input組件總共有20個多屬性，5個事件，4個插槽，這樣是不是很繁瑣，對我們這些想要“懶”的人，事不對不可以的，那該怎么辦呢。

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

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

　　一、對于第三方組件的屬性props、事件events

　　在Vue2中

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

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

　　而在Vue3中

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

　　$listeners對象在 Vue 3 中已被移除。事件監聽器現在是$attrs的一部分。

　　在<script setup>中輔助函數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>

　　就算加上上面這些也是不夠的。現在我們綁定的屬性（包括class和style）同時會在根元素（上面的例子是class="my-input"的Dom節點）上起作用。要阻止這個默認行為，我們需要設置inheritAttrs為false。

　　下面我們來看看Vue3文檔對inheritAttrs的解釋

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

　　于是，我們對于第三方組件的屬性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>

　　二、對于第三方組件的插槽slots

　　Vue3中

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

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

　　在<script setup>中輔助函數useSlots可以獲取到$slots。

　　從上面幾點看到，我們對于第三方組件的封裝沒有增加額外的插槽，且第三方組件的插槽處于同一個dom節點之中，我們也有一種取巧的封裝方式????, 通過遍歷$slots拿到插槽的name，動態添加子組件的插槽：

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

　　上再不行，沒辦法就只要好，在子組件中手動添加需要的第三方組件的插槽~

　　三、對于第三方組件的方法methods

　　對于第三方組件的方法，我們通過ref來實現。首先在MyInput組件中的el-input組件上添加一個ref="elInputRef"屬性，然后通過defineExpose把elInputRef暴露出去給父組件調用。

　　子組件：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>的組件里的屬性默認是關閉的，需通過defineExpose暴露出去才能被調用
　　})
　　</script>

　　父頁面：Index.vue的調用代碼如下：

　　// 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) // 組件實例
　　onMounted(()=> {
　　myInput.value.elInputRef.focus() // 初始化時調用elInputRef實例的focus方法
　　})
　　</script>

　　以上就是Vue3 Composition API優雅封裝第三方組件的詳細內容，請大家好好學習深入了解。