Vue3组件二次封装

目标：

封装my-input组件，继承a-input，额外加一些自己封装的内容，但是不影响a-input组件的插槽和属性

代码：

<template>
  <div>
    <a-input v-bind="attrs">
      <template v-for="(value, name) in slots" #[name] = "slotData">
        <slot :name="name" v-bind="slotData || {}"></slot>
      </template>
    </a-input>
  </div>
</template>

<script setup lang="ts">
    import { useAttrs, useSlots } from 'vue'
    const slots = useSlots()
    const attrs = useAttrs()
</script>

<style scoped lang="scss">

</style>

使用：

    <my-input size="large">
      <template #suffix>
        456
      </template>
    </my-input>

效果

image.png

vue2组件二次封装

https://www.jianshu.com/p/13602e143d6c