vue3-carousel 中如何调用方法答案

【问题标题】：How do you call methods in vue3-carouselvue3-carousel 中如何调用方法
【发布时间】：2022-01-03 23:40:35
【问题描述】：

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

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

【问题讨论】：

标签： vue.js vuejs3 vue3-carousel

【解决方案1】：

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

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

【讨论】：

感谢您的回复！我使用了上述方法，但不幸的是仍然无法访问这些方法。确保我将 ref 添加到 Carousel。从 vue 添加了 ref，并具有与上所示相同的设置，但我收到一个错误报告，指出方法 slideTo 在 myCarousel 上不存在。

【解决方案2】：

代替

const slideToBeginning = () => myCarousel.slideTo(0);

应该是

const slideToBeginning = () => myCarousel.value.slideTo(0);

【讨论】：