解决:对于二次封装组件,需要批量继承的有三个。属性、方法、插槽,这三个是最需要,分别如下:
属性继承
<xxx-xxx v-bind="$attrs">
</xxx-xxx>
方法继承
<xxx-xxx v-on="$listeners">
</xxx-xxx>
插槽继承
插槽的话比较特殊,官方没有提供直接的方法,但是不妨碍我们使用一些技巧,如下
<xxx-xxx>
<template v-for="(index, name) in $slots" :slot="name">
<slot :name="name" />
</template>
</xxx-xxx>
vue2完整写法
<xxx-xxx v-bind="$attrs" v-on="$listeners">
<template v-for="(index, name) in $slots" :slot="name">
<slot :name="name" />
</template>
</xxx-xxx>
vue3完整写法
模板
<xxx-xxx v-bind="$attrs" ref="xxxRef">
<template v-for="(index, name) in slots" #[name]="slotData" :key="name">
<slot :name="name" v-bind="slotData || {}" />
</template>
</xxx-xxx>
js setup
import xxxXxx from './xxxXxx.vue'
const xxxRef = ref()
const slots = useSlots()
const expose = {};
onMounted(() => {
const entries = Object.entries(xxxRef.value);
for (const [method, fn] of entries) {
expose[method] = fn;
}
});
defineExpose(expose);