一绽左、如何繼承Element組件的屬性Attributes
1.1、需要$attrs
$attrs組件實例的該屬性包含了父作用域中不作為prop被識別 (且獲取) 的 attribute綁定 (class和style除外)解孙。當一個組件沒有聲明任何 prop 時坑填，這里會包含所有父作用域的綁定 (class和style除外)，并且可以通過v-bind="$attrs"傳入內(nèi)部的 UI 庫組件中弛姜。
<template>
<div class="t_select">
<el-select
v-model="childSelectedValue"
:style="{width: width||'100%'}"
v-bind="attrs"
>
<el-option
v-for="(item,index) in optionSource"
:key="index+'i'"
:label="item[labelKey]"
:value="item[valueKey]"
></el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'TSelect',
computed: {
attrs() {
return {
// 'popper-append-to-body': false,
clearable: true, // 默認開啟清空
filterable: true, // 默認開啟過濾
...this.$attrs
}
}
}
</script>
二脐瑰、如何繼承Element組件的事件Events
2.1、需要$listeners
$listeners組件實例的該屬性包含了父作用域中的(不含.native修飾器的)v-on事件監(jiān)聽器廷臼。它可以通過v-on="$listeners"轉(zhuǎn)發(fā)傳入內(nèi)部組件苍在，進行對事件的監(jiān)聽處理。
<template>
<div class="t_select">
<el-select
v-model="childSelectedValue"
:style="{width: width||'100%'}"
v-bind="attrs"
v-on="$listeners"
>
<el-option
v-for="(item,index) in optionSource"
:key="index+'i'"
:label="item[labelKey]"
:value="item[valueKey]"
></el-option>
</el-select>
</div>
</template>
三荠商、如何繼承Element組件的方法methods
image.png
3.1寂恬、我們不應(yīng)該在組件中一個一個的去手動添加clearSort() { this.$refs['el-table'].clearSort() }
3.2、因此需要在組件中根據(jù)this.$refs['el-table']來遍歷el-table所有的方法將其掛載在我們自己的組件this上
image.png
mounted() {
this.extendMethod()
},
methods: {
// 繼承el-table的Method
extendMethod() {
const refMethod = Object.entries(this.$refs['el-table'])
for (const [key, value] of refMethod) {
if (!(key.includes('$') || key.includes('_'))) {
this[key] = value
}
}
},
}
四莱没、如何使用第三方組件的Slots
4.1初肉、我們不應(yīng)該在組件中一個一個的去手動添加<slot name="prefix">
4.2、因此需要$slots和$scopedSlots
$slots普通插槽饰躲，使用$slots這個變量拿到非作用域的插槽牙咏，然后循環(huán)渲染對應(yīng)的普通具名插槽，這樣就可以使用第三方組件提供的原插槽属铁；
$scopedSlots作用域插槽則繞了一圈眠寿，使用了一個插槽的語法糖（具名插槽的縮寫）并且結(jié)合著動態(tài)插槽名的用法；循環(huán)$scopedSlots作用插槽位置和傳遞對應(yīng)的參數(shù)焦蘑，，這樣就可以使用第三方組件提供的作用域插槽盒发。
<template>
<div class="t_input">
<el-input
v-model="childSelectedValue"
v-bind="attrs"
v-on="$listeners"
>
<!-- 遍歷子組件非作用域插槽例嘱，并對父組件暴露 -->
<template v-for="(index, name) in $slots" v-slot:[name]>
<slot :name="name" />
</template>
<!-- 遍歷子組件作用域插槽，并對父組件暴露 -->
<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
<slot :name="name" v-bind="data"></slot>
</template>
</el-input>
</div>
</template>
五宁舰、Vue 3組件封裝的變化
5.1拼卵、$attrs 與 $listeners 合并
在Vue 3.x當中，取消了$listeners這個組件實例的屬性蛮艰，將其事件的監(jiān)聽都整合到了$attrs這個屬性上了腋腮，因此直接通過v-bind=$attrs屬性就可以進行props屬性和 event事件的透傳。
5.2壤蚜、$slot與 $scopedSlots 合并
在Vue 3.x當中取消了作用域插槽$scopedSlots的屬性即寡，將所有插槽都統(tǒng)一在$slots當中，因此在 Vue 3.x當中不需要分默認插槽袜刷、具名插槽和作用域插槽聪富，可以進行統(tǒng)一的處理。
5.3著蟹、如何繼承第三方組件的Methods
<template>
<el-form class="t-form" ref="tform" :class="className" :model="formOpts.formData" :rules="formOpts.rules"
:label-width="formOpts.labelWidth || '100px'" :label-position="formOpts.labelPosition || 'right'" v-bind="$attrs">
....
</el-form>
</template>
<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
// 獲取ref
const tform: any = ref<HTMLElement | null>(null)
// 獲取實例方法
const instance: any = getCurrentInstance()
onMounted(() => {
// 把el-form方法注入到實例的exposed中
const entries = Object.entries(tform.value.$.exposed)
// console.log('111', entries)
for (const [key, value] of entries) {
instance.exposed[key] = value
}
})
// 自定義校驗
const selfValidate = () => {
return new Promise((resolve: any, reject: any) => {
tform.value.validate((valid: boolean) => {
if (valid) {
resolve({
valid,
formData: props.formOpts.formData,
})
} else {
// eslint-disable-next-line prefer-promise-reject-errors
reject({
valid,
formData: null,
})
}
})
})
}
// 暴露方法出去
defineExpose({ ...instance.exposed, selfValidate })
</script>
