vue.js - vue3-carousel 中如何调用方法

Question

对使用 vue 非常陌生，我刚刚收到了关于如何根据文档访问 vue3-carousel 提供的 API 的简单问题：https ://ismail9k.github.io/vue3-carousel/getting-started.html

在 API 部分下，库提供了一些方法，例如我想使用：slideTo(index: number) 方法，文档提供的方法是在第二项而不是默认的第一项上启动轮播。

Answer 1

在内部，vue3-carousel 使用组合 api 中的 Expose 方法，该方法通过模板引用公开组件实例上的属性/方法。

<template>
   <div>
         <Carousel ref="myCarousel"></Carousel>
         <button type="button" @click="slideToBeginning">to beginning</button>
   </div>
</template>

<script>  

import { ref } from 'vue'

export default {
   setup() {
      //the name of the variable is equal to the ref value of the carousel component
      const myCarousel = ref(null);  

      // now we can use myCarsousel's exposed methods
      const slideToBeginning = () => myCarousel.slideTo(0);

      return {
          myCarousel,
          slideToBeginning 
      }
   }

</script>