元素Ui: Carousel -如何设置当前幻灯片

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<template>
  <div>
    <el-carousel :interval="4000">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.image" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselItems: [
        { image: 'https://example.com/slide1.jpg' },
        { image: 'https://example.com/slide2.jpg' },
        { image: 'https://example.com/slide3.jpg' }
      ]
    };
  }
};
</script>

<template>
  <div>
    <el-carousel :interval="4000" v-model="currentIndex">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.image" alt="">
      </el-carousel-item>
    </el-carousel>
    <button @click="setCurrentSlide(0)">第一张</button>
    <button @click="setCurrentSlide(1)">第二张</button>
    <button @click="setCurrentSlide(2)">第三张</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselItems: [
        { image: 'https://example.com/slide1.jpg' },
        { image: 'https://example.com/slide2.jpg' },
        { image: 'https://example.com/slide3.jpg' }
      ],
      currentIndex: 0
    };
  },
  methods: {
    setCurrentSlide(index) {
      this.currentIndex = index;
    }
  }
};
</script>

<template>
  <div>
    <el-carousel :interval="4000" ref="carousel">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.image" alt="">
      </el-carousel-item>
    </el-carousel>
    <button @click="setCurrentSlide(0)">第一张</button>
    <button @click="setCurrentSlide(1)">第二张</button>
    <button @click="setCurrentSlide(2)">第三张</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselItems: [
        { image: 'https://example.com/slide1.jpg' },
        { image: 'https://example.com/slide2.jpg' },
        { image: 'https://example.com/slide3.jpg' }
      ]
    };
  },
  methods: {
    setCurrentSlide(index) {
      this.$refs.carousel.setActiveItem(index);
    }
  }
};
</script>