【Ionic×Vue】Composition APIでion-Slidesのメソッドを呼び出す方法

Ionic × Vue3（Composition API） でion-slidesのメソッドを呼ぶ方法の紹介です。
結論だけ知りたい人のために、最初にコード全体を載せます。
下記コードだけではよくわからない人は、読み進めてください。

結論

<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <button @click="nextSlide()">次のページ</button>
      <button @click="prevSlide()">前のページ</button>
      <button @click="slideTo(2)">3ページ目</button>
      
      <ion-slides :options="slideOpts" ref="slideRef">
        <ion-slide>
          <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { ref } from 'vue';
import { IonPage, IonContent, IonSlides, IonSlide } from '@ionic/vue';

export default {
  components: {
    IonContent,
    IonPage,
    IonSlides,
    IonSlide,
  },
  setup() {
    const slideRef = ref<any>(null);

    const nextSlide = async () => {
      const s = await slideRef.value.$el.getSwiper();
      await s.slideNext();
    };

    const prevSlide = async () => {
      const s = await slideRef.value.$el.getSwiper();
      await s.slidePrev();
    };

    const slideTo = async (index: number) => {
      const s = await slideRef.value.$el.getSwiper();
      await s.slideTo(index);
    };
    
    return {
      slideRef,
      nextSlide,
      prevSlide,
      slideTo,
    };
  },
};
</script>

解説

1. ion-slidesに対するrefを設定

ion-slidesを参照するために、refを作成します。

<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <ion-slides :options="slideOpts" ref="slideRef">
        <ion-slide>
          <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { ref } from 'vue';
import { IonPage, IonContent, IonSlides, IonSlide } from '@ionic/vue';

export default {
  components: {
    IonContent,
    IonPage,
    IonSlides,
    IonSlide,
  },
  setup() {
    const slideRef = ref<any>(null);
    return {
      slideRef,
    };
  },
};
</script>

2.ページ送りボタンと関数を実装

こちらで定義されているメソッドを利用するには、以下のようにgetSwiper()でswiperインスタンスを取得する必要があります。

const s = await slideRef.value.$el.getSwiper();

上記で取得したインスタンスに対して、各メソッドを実行します。

<template>
  <ion-page>
    <ion-content :fullscreen="true">
+     <button @click="nextSlide()">次のページ</button>
+     <button @click="prevSlide()">前のページ</button>
+     <button @click="slideTo(2)">3ページ目</button>

      <ion-slides :options="slideOpts" ref="slideRef">
        <ion-slide>
          <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { ref } from 'vue';
import { IonPage, IonContent, IonSlides, IonSlide } from '@ionic/vue';

export default {
  components: {
    IonContent,
    IonPage,
    IonSlides,
    IonSlide,
  },
  setup() {
    const slideRef = ref<any>(null);
    
+   const nextSlide = async () => {
+     const s = await slideRef.value.$el.getSwiper();
+     await s.slideNext();
+   };
+
+   const prevSlide = async () => {
+     const s = await slideRef.value.$el.getSwiper();
+     await s.slidePrev();
+   };
+
+   const slideTo = async (index: number) => {
+     const s = await slideRef.value.$el.getSwiper();
+     await s.slideTo(index);
+   };
    
    return {
      slideRef,
    };
  },
};
</script>

これでion-slidesのメソッドを利用することができます。