vue 二次封装组件

解决：对于二次封装组件，需要批量继承的有三个。属性、方法、插槽，这三个是最需要，分别如下：

属性继承

<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);