各種UI庫的功能都是非常強大的，尤其對於我這種不會 css 的人來說，就更是幫了大忙了。
只是嘛，如果再封裝一下的話，那么用起來就會更方便了。
那么如何封裝呢？
封裝三要素 —— 屬性、插槽、事件、方法
可以封裝，但是原生UI庫提供的強大功能不能給封裝沒了吧，吃了回扣可是不好滴。
那么如何做到不遺漏呢？先做一個合格的傳聲筒。
傳遞屬性
先看看 el-input 提供的屬性：
太長了，這里只截了一半。
這么多的屬性，如果一個一個都弄到 props 里面，然后再一個一個綁定上去，這就太麻煩了。
我們可以分成兩部分，重要的屬性做到 props 里面，其他的可以放到 $attrs 里面。
定義一個簡單的組件
模板
<template>
<div>
<el-input
v-model="value" // 不能直接幫的屬性
v-bind="$attrs" // 綁定其他屬性。
>
</el-input>
</div>
</template>
代碼
export default {
name: 'test-text',
inheritAttrs: false,
props: {
modelValue: [String, Number]
},
setup(props, ctx) {
const value = debounceRef(props, ctx.emit)
return {
value
}
}
}
父組件的調用代碼：
模板
<inputtext
v-model="value"
v-bind="attrs"
>
</inputtext>
代碼
const value = ref('222')
const attrs = reactive({
maxlength: 10,
'show-word-limit': true,
clearable: true
})
這里 modelValue 就是 props ，maxlength、show-word-limit、clearable 就變成了 $attrs 。
然后要看 el-input 是否是根元素，如果是跟元素的話，那么會自動綁定上，不需要我們手動寫 v-bind="$attrs"。
如果像上面的例子不是根元素的話，需要手動寫 v-bind="$attrs"。
inheritAttrs
這個是指定組件是否自動綁定 $attrs 。
默認是 true，會自動把 $attrs 綁定到根元素上面，不管根元素是啥。
這里設置為 false，那么$attrs 就不會自動綁定到 div 上面了。
插槽
這個稍微復雜一點，插槽本來就有一點繞，官網的介紹又比較含混。
我們可以找到 $slots 這個東東，但是官網的介紹（https://www.vue3js.cn/docs/zh/api/instance-properties.html#slots ）卻是 使用 h，這個就……
不過想要傳遞插槽，還是需要這個。
我們先看看 el-input 的插槽的使用。
<el-input
placeholder="請輸入內容"
v-model="input3"
class="input-with-select"
>
<template #prepend>
<el-select v-model="select" placeholder="請選擇">
<el-option label="餐廳名" value="1"></el-option>
<el-option label="訂單號" value="2"></el-option>
<el-option label="用戶電話" value="3"></el-option>
</el-select>
</template>
<template #append>
<el-button icon="el-icon-search"></el-button>
</template>
</el-input>
那么想要傳遞插槽的話，是不是可以這樣？
<!--傳遞插槽-->
<template v-slot:prepend> // 給遞給el-input 的插槽
<slot name="prepend"></slot> // 接收父組件傳遞進來的插槽
</template>
測試可以。
那么總不會一個一個寫吧，這也太麻煩了。如果能夠for就好了。
等等， for？那么我們是不是可以這樣。
<!--傳遞插槽-->
<template
v-for="(item, key, index) in $slots"
:key="index"
v-slot:[key]
>
<slot :name="key"></slot>
</template>
測試可以。
完整代碼
<el-input
ref="refInput"
v-model="value"
v-bind="$attrs"
>
<!--傳遞插槽-->
<template
v-for="(item, key, index) in $slots"
:key="index"
v-slot:[key]
>
<slot :name="key"></slot>
</template>
</el-input>
傳遞事件
這個就簡單了，啥都不用做，自動就傳遞出去了。el-input 是否是跟元素都可以。
測試一下：
<inputtext
ref="refInput"
v-model="value"
v-bind="props"
@clear="clear"
@my-change="myChange"
>
- clear 是 el-input 提供的事件，外部可以直接得到這個事件，組件內部不用做操作。
- my-change 是自定義的事件。
方法
一直都忽略了，還有方法這個事，因為基本沒用過。
使用方法嘛，就需要使用 ref，這個此 ref 非彼 ref，說不清了，還是寫代碼吧。
直接使用的方法
直接使用UI庫組件的方法，比如 el-input 的 提供的 select：
<el-input
ref="refInput" // 注意這里的 ref
v-model="value"
v-bind="$attrs" >
</el-input>
ref 的寫法，不要加冒號。
const refInput = ref(null) // 先放一個null
onMounted(() => { // 然后在 onMounted 里面才能得到值。
console.log('refinput', refInput) // 看看啥樣。
refInput.value.select() // 調用方法，文本框的內容會被選中
})
先定義一個 ref，然后交給模板里的 ref，好像有點繞，這里必須使用 ref，reactive是不行滴。
在渲染后才能生效，也就是說必須在 onMounted 里面才能得到值，我們看看打印結果：（太長只能截取一部分）
很長吧。
父組件里面怎么用方法
<inputtext
ref="refInput"
v-model="value">
</el-input>
// 測試方法
const refInput = ref(null)
onMounted(() => {
console.log('refinput', refInput)
// refInput.value.$refs.refInput.select()
refInput.value.refInput.select()
})
父組件里面的用法是一樣的，只是需要再套一層，才能拿到自定義組件內部的UI庫組件。
看看結構：
太長了，還在下面。
這個就比較近了。
話說為啥弄得這么多屬性和方法事件呀？
父組件調用子組件內部的方法
上面那種方式，還可以讓父組件調用子組件內部定義的方法，比如內部定義一個
const setInput = () => {
value.value = new Date()
}
父組件可以這樣調用
refInput.value.setInput()
總結
其實事件和方法，並沒有封裝，而是直接就可以使用的。
這是 element-plus 測試的結果，其他UI庫沒有測試。
插槽需要寫一個 v-for 就可以實現傳遞，而且是通用的代碼。
屬性 就需要規划一下了，看設計要求，哪些放在 props里面，哪些放在attrs 里面。