【Ionic×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 방법을 사용할 수 있습니다.