vue3 swiper 中的change事件

在 Vue3 中使用 Swiper 滑块组件时，`change` 事件是一个很重要的内置事件。当滑块内部的当前索引发生变化，或者用户通过某种方式触发了滑动切换（例如手动滑动、自动轮播等），`change` 事件就会被触发。你可以利用这个事件来更新状态、响应用户的交互或者执行其他与当前滑块内容相关的操作。

举个例子，在 Vue 组件里，你可以这样处理 `change` 事件：

<template>
  <swiper :options="swiperOptions" @change="handleChange">
    <!-- ...滑块项列表... -->
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      swiperOptions: {
        // ...配置选项...
      },
    };
  },
  methods: {
    handleChange(index) {
      console.log(`当前滑到第 ${index} 个`);
      this.doSomethingWithSlide(index); // 执行与当前滑块相关的操作
    },
    doSomethingWithSlide(index) {
      // ...这里可以访问或处理当前显示的slide的内容...
    }
  },
};
</script>

在这个例子中，每当滑块改变，`handleChange` 方法会被调用，并传入新的滑块索引。你可以根据需要定制你的业务逻辑。