原来 Vue 不用 jsx 语法实现一个 Space 组件这么简单

实现代码

<script setup>
import { useSlots } from 'vue';
const slots = useSlots();
</script>
<template>
  <div class="space">
    <div v-for="item in slots.default()">
      <component :is="item"></component>
    </div>
  </div>
</template>

<style scoped>
.space {
  display: flex;
  gap: 10px;
}
.space-item {
  flex: 1;
}
</style>

原理

获取到组件的默认插槽，默认插槽包含的所有子组件，直接使用 component 动态组件渲染子组件，大功告成！！！