Vue3 如何可控遍历子组件slot内部元素

遇到这样一个场景，子组件为一个兼容性组件并且主插槽内部为需要在父组件中遍历的内容，并且子组件将可以控制插槽中的元素。代码如下

//子组件
<template>
    <div>
        <slot :content="content"></slot>
    </div>
</template>
<script lang="ts" setup>
const prop = defineProps<{content: any[]}>()
const content = computed(....)
</script>


//父组件
<template>
    <Child v-slot="slotProps" :content="content">
        <div v-for="item in slotProps.content">
           ....
        </div>
    </Child>
</template>
<script lang="ts" setup>
const content = reactive({})
</script>

vue3子组件通过在slot标签上设置属性的方式传递数据至父组件v-slot内部。并且父组件v-slot内部元素受父组件css scoped样式影响。从而达到目的。