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

更改时传递活动幻灯片的索引是指在Vue.js 3和Ionic 4中，在切换活动幻灯片（轮播图）时，传递当前活动幻灯片的索引值。

在Vue.js 3中，可以通过使用v-model指令绑定一个名为slideIndex的变量，来实现传递活动幻灯片索引的功能。当活动幻灯片发生变化时，该变量会自动更新。

示例代码如下：

<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>

在Ionic 4中，使用ionSlides组件来创建幻灯片，并可以通过ionSlideDidChange事件来监听活动幻灯片的变化。

示例代码如下：

<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>

通过以上示例代码，我们可以在Vue.js 3和Ionic 4中实现更改时传递活动幻灯片的索引功能。