Vue.js中如何高效提取插槽元素ID并生成索引数组？

你当前通过slots.default().map直接提取插槽VNode props的方式，存在无法响应插槽动态变化（新增/删除Slide）、依赖底层VNode结构不够稳健的问题，以下是两种更优的实现方案：

方案一：Provide/Inject 父子组件通信（推荐） #

通过Vue的依赖注入机制，让Slide组件主动向Carousel注册/注销自身ID，符合组件通信规范且支持动态更新。

修改Carousel组件 #

<template>
  <div class="carousel">
    {{ slides }}
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';

const currentSlide = ref(0);
const slides = ref([]);

// 向子组件提供注册/注销方法
const registerSlide = (id) => {
  if (!slides.value.includes(id)) {
    slides.value.push(id);
  }
};

const unregisterSlide = (id) => {
  slides.value = slides.value.filter(item => item !== id);
};

provide('carousel', { registerSlide, unregisterSlide });
</script>

修改Slide组件 #

<template>
  <div class="slide">
    <slot></slot>
  </div>
</template>

<script setup>
import { inject, onMounted, onUnmounted } from 'vue';

// 声明id属性
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
});

// 注入Carousel提供的方法
const { registerSlide, unregisterSlide } = inject('carousel');

// 组件挂载时注册ID
onMounted(() => {
  registerSlide(props.id);
});

// 组件卸载时注销ID
onUnmounted(() => {
  unregisterSlide(props.id);
});
</script>

方案二：监听插槽更新提取ID #

如果不想修改Slide组件，可以通过监听组件更新事件，动态提取插槽中Slide的ID，适配动态变化的插槽内容。

修改Carousel组件 #

<template>
  <div class="carousel">
    {{ slides }}
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, onUpdated } from 'vue';

const currentSlide = ref(0);
const slides = ref([]);

// 提取Slide组件ID的工具函数
const getSlideIds = () => {
  return $slots.default?.()
    // 过滤出Slide组件的VNode（需确保Slide组件设置了name属性）
    ?.filter(node => node.type.name === 'Slide')
    ?.map(node => node.props.id) || [];
};

// 初始化提取ID
slides.value = getSlideIds();

// 组件更新时重新提取ID，响应插槽变化
onUpdated(() => {
  slides.value = getSlideIds();
});
</script>

补充：给Slide组件设置name属性 #

确保上述方案能正确识别Slide组件，需在Slide组件中添加name定义：

<template>
  <div class="slide">
    <slot></slot>
  </div>
</template>

<script setup>
// 定义组件名称
defineOptions({
  name: 'Slide'
});
</script>

方案对比 #

• Provide/Inject方案：组件职责清晰，支持动态注册/注销，稳定性高，是Vue组件通信的标准方式，推荐使用。
• 监听插槽方案：无需修改Slide组件，适合快速改造，但依赖VNode的type.name属性，对组件结构有一定要求。

内容的提问来源于stack exchange，提问作者Akirambur