如何向vue3-carousel孙组件#slides插槽传模板？封装组件报错求助

我基于vue3-carousel封装了BaseSlider组件，代码如下：

<template>
    <div class="mv-slide">
        <carousel ref="carousel" v-model="currentSlide" :items-to-show="1">
            <slot />
            <template #addons v-if="arrow">
                <navigation>
                    <template #next>
                        <span> >> </span>
                    </template>
                    <template #prev>
                        <span>
                            dsa </span>
                    </template>
                </navigation>
            </template>
        </carousel>
        <div class="mv-slide__pagination" v-if="indicator">
            <div v-for="slide in 11" :class="{
                'mv-slide__pagination-item': true,
                'mv-slide__pagination-item--active': currentSlide === slide
            }" @click="currentSlide = slide"></div>
        </div>
    </div>
</template>

使用方式：

<BaseSlider>
      <Slide v-for="slide in 10" :key="slide">
                <img src="http://localhost:3000/custom-estimate-mv1.png" alt="custom estimate"
                    class="mv-slide___img">
        </Slide>
 </BaseSlider>

运行时应用崩溃，报错：

[Vue warn]: Unhandled error during execution of render function
at <Carousel ref="carousel" modelValue=0 onUpdate:modelValue=fnonUpdate:modelValue ... >
Cannot set properties of null (setting 'index')
at Array.forEach ()

以下是针对性的修复步骤：

1. 补充组件script逻辑，初始化必要变量
   你的BaseSlider缺少script部分，必须定义绑定的变量并注册vue3-carousel组件：

   <script setup>
   import { ref } from 'vue'
   import { Carousel, Slide, Navigation } from 'vue3-carousel'
   import 'vue3-carousel/dist/carousel.css'
   
   // vue3-carousel的索引从0开始，初始化当前slide索引
   const currentSlide = ref(0)
   // 控制箭头和指示器显示，可根据需求默认开启或通过props传入
   const arrow = ref(true)
   const indicator = ref(true)
   </script>
   

2. 修正分页指示器的循环逻辑
   硬编码循环11个分页项，但实际只有10个slide（索引0-9），点击超出范围的索引会找不到对应slide导致报错。改为根据实际slide数量动态生成：

   <script setup>
   const props = defineProps({
     totalSlides: {
       type: Number,
       required: true
     }
   })
   </script>
   
   <template>
     <div class="mv-slide__pagination" v-if="indicator">
       <div 
         v-for="(item, index) in props.totalSlides" 
         :key="index"
         :class="{
           'mv-slide__pagination-item': true,
           'mv-slide__pagination-item--active': currentSlide === index
         }" 
         @click="currentSlide = index"
       ></div>
     </div>
   </template>
   

   使用时传入总数：

   <BaseSlider :total-slides="10">
     <!-- slide内容 -->
   </BaseSlider>
   

3. 限制currentSlide的索引范围
   添加监听确保索引始终在有效范围内，避免超出导致报错：

   <script setup>
   import { watch } from 'vue'
   
   watch(currentSlide, (newVal) => {
     if (newVal < 0) currentSlide.value = 0
     if (newVal >= props.totalSlides) currentSlide.value = props.totalSlides - 1
   })
   </script>
   

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