更改时传递活动幻灯片的索引，vuejs 3 ionic4

<template>
  <ion-slides v-model:slideIndex="currentSlideIndex">
    <ion-slide>Slide 1</ion-slide>
    <ion-slide>Slide 2</ion-slide>
    <ion-slide>Slide 3</ion-slide>
  </ion-slides>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const currentSlideIndex = ref(0);

    return {
      currentSlideIndex
    };
  }
};
</script>

<template>
  <ion-slides @ionSlideDidChange="onSlideChange">
    <ion-slide>Slide 1</ion-slide>
    <ion-slide>Slide 2</ion-slide>
    <ion-slide>Slide 3</ion-slide>
  </ion-slides>
</template>

<script>
import { IonSlides, IonSlide } from '@ionic/vue';
import { onMounted, ref } from 'vue';

export default {
  components: {
    IonSlides,
    IonSlide
  },
  setup() {
    const currentSlideIndex = ref(0);

    const onSlideChange = (event) => {
      currentSlideIndex.value = event.detail.activeIndex;
    };

    onMounted(() => {
      // 初始化当前活动幻灯片索引
      currentSlideIndex.value = 0;
    });

    return {
      currentSlideIndex,
      onSlideChange
    };
  }
};
</script>