vue组件嵌套props传递以及slots传递

最近在封装组建的时候遇到一个问题，使用到嵌套组件传参和传递slot的问题，我用的方法比较傻，props用的props一层层写下去，还有slot也是，直到看到这两个方法：

        useAttrs和useSlots 用了这个就不用一个组建一个组建的写props了 代码也优雅了很多

<template>
    <div>
        <attrInner v-bind="attrs">
            <template v-for="item in slotsArr" #[item] :key="item">
                <slot :name="item"></slot>
            </template>
        </attrInner>
    </div>
</template>

<script lang="ts" setup>
import attrInner from './attrInner.vue'
import {defineProps,useAttrs,useSlots} from 'vue'
const slots = useSlots()
console.log('slots',slots);
const slotsArr = Object.keys(slots)
// 注意 如果使用了prop 那么在props中的参数是不会在useAttrs中传递的
const attrs = useAttrs() 
console.log('attrs',attrs);

</script>