vue3二次封装element组件多层透传属性 & 插槽

需求：二次封装element组件，需要支持原属性和插槽，这里分别说一下SFC和TSX的透传方式

透传属性 attrs

SFC: v-bind="$attrs" 和 useAttrs

// index.vue
<el-input v-bind="$attrs" />

// index.vue
<script setup lang="ts">
import { useAttrs } from "vue";
const attrs = useAttrs()
</script>
<template>
  <el-input v-bind="attrs" />
</template>

TSX: {...attrs}

*setup(props,context)函数中上下文参数context，包含attrs、emit、slots

// index.tsx
import { defineComponent } from "vue";
export default defineComponent({
    setup(props, {attrs}) {
        return () => (
          <el-input {....attrs}></el-input>
        );
    }
})

透传属性 slots

SFC: useSlots

// index.vue
<script setup lang="ts">
import { useSlots } from "vue";
const slots = useSlots()
</script>
<template>
  <el-input v-bind="$attrs">
    <!-- 遍历父组件传入的 solts 透传给子组件 -->
    <template v-for="(item, key, i) in slots" :key="i" v-slot:[key]>
      <slot :name="key"></slot>
    </template>
  </el-input>
</template>

TSX: v-solts={slots}

// index.tsx
import { defineComponent } from "vue";
export default defineComponent({
    setup(props, {attrs、emit、slots}) {
        return () => (
          <el-input v-slots={slots}></el-input>
        );
    }
})