vue3.0 でカルーセル コンポーネントをカプセル化する手順

'./Carousel/carousel' から Carousel をインポートします。
CarItem を './Carousel/item' からインポートします。SqmUI = {} とします。
SqmUI.install = 関数(vue) {
 vue.component(カルーセル.name, カルーセル);
 vue.component(CarItem.name,CarItem);
};
デフォルトのSqmUIをエクスポートします。

const _default を宣言します: ({
 install: (app: import("vue").App<any>, ...options: any[]) => any; // 以下は install の簡単な説明です});
デフォルト _default をエクスポートします。

'@/libs/sqm_ui/index' から SqmUI をインポートします。
'vue' から {createApp} をインポートします。
SqmUI を作成します。

<テンプレート>
 <div class="carousel">
 <slot></slot> // ここのスロットはアイテムコンポーネントを配置するために使用されます</div>
</テンプレート>

<テンプレート>
 <div class="carousel-item">
 <slot></slot> // ここのスロットは画像を配置するために使用されます
 </div>
</テンプレート>

<カルーセル
 :autoPlay="true" 
 :durdation="3000" 
 :initial="3" 
 :hasDot="true" 
 :hasDirector="true"> </カルーセル>

小道具: { 
 自動再生:  
 タイプ: ブール値、  
 デフォルト: true }, 
 間隔： {  
 タイプ: 数値、  
 デフォルト: 3000 }, 
 イニシャル： {  
 タイプ: 数値、  
 デフォルト: 0 }, 
 ドット: {  
 タイプ: ブール値、
 デフォルト: true }, 
 ディレクター: { 
 タイプ: ブール値、  
 デフォルト: true }
}

定数autoPlay = () => {
 （props.autoplay）の場合{
 t = setInterval(() => {
  // カルーセルロジック}, props.duration);
};
マウント時(() => {
 自動再生();
});

<div class="carsel-item" v-if="selfIndex === currentIndex"> 
 <スロット></スロット> 
</div>

設定（） {
 const インスタンス:any = getCurrentInstance(); console.log(インスタンス);
}

セットアップ(プロパティ) { 
 定数状態 = リアクティブ({  
 現在のインデックス: props.initial、  
 アイテム長さ: 0,  
 表示ディレクトリ: false 
 });
}

const setIndex = ((dir:String): void => { 
 スイッチ(dir) { 
 ケース 'next':  
  状態.現在のインデックス += 1;  
  (state.currentIndex === state.itemLen) の場合 {   
  状態.currentIndex = 0;  
  }  
  壊す; 
 '前'の場合:  
  状態.現在のインデックス -= 1;  
  (state.currentIndex === -1)の場合{   
  state.currentIndex = state.itemLen - 1;  
  }  
  壊す; 
 デフォルト：  
  壊す; 
 } 
});

ウォッチ(() => {  
 インスタンス.parent.ctx.currentIndex を返す 
 }, (値) => {  
 state.currentIndex = 値; 
})

<テンプレート>
 <div class="dot-goes-wrapper" v-if="hasDot">
 <div class="dot-item" v-for="item in itemLen" :key="item">
 <a href="javascript:;" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" 
  クラス="ドットリンク"
  :style="{backgroundColor: (item - 1) === currentIndex ? dotBgColor : '#fff'}" 
  @click="dotClick(アイテム - 1)">
 </a> 
 </div> 
 </div>
</テンプレート>
<script lang="ts">
'vue' から {defineComponent} をインポートします。
エクスポートデフォルトdefineComponent({
 名前: 'ドット',
 小道具: { 
 項目長さ: 数値、 
 currentIndex: 数値、 
 ドット背景色: {  
  タイプ: 文字列、
  デフォルト: '#ff5000' },
 ドット: {  
  タイプ: ブール値、  
  デフォルト: true } 
 }, 
 セットアップ(props, ctx) { 
 const dotClick = (インデックス: 数値) => { 
  ctx.emit('dotClick', インデックス); 
 }; 
 戻る {  
  ドットクリック 
 } 
}})
</スクリプト>

@dotClick="ドットクリック"

const dotClick = (インデックス: 任意): void => {

state.currentIndex = インデックス;

};

<テンプレート> 
 <div v-if="showDir"> 
 <div class="director dir-next" v-if="dir === 'next'">  
  <a href="javascript:;" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" @click="dirClick(dir)">&gt;</a> 
 </div> 
 <div class="director dir-prev" v-else-if="dir === 'prev'">  
  <a href="javascript:;" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" @click="dirClick(dir)">&lt;</a> 
 </div> 
 </div>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent} をインポートします。
エクスポートデフォルトdefineComponent({ 
 名前: 'direct'、 
 小道具: { 
 dir: 文字列、 
 表示ディレクトリ: {  
  タイプ: ブール値、  
  デフォルト: false 
 } 
 }, 
 セットアップ(props, ctx) { 
 const dirClick = (dir: 文字列) => {  
  ctx.emit('dirClick', dir); 
 }; 
 戻る {  
  クリック 
 } 
 }
})</script>

マウント解除前に(() => {

      _clearFunction();

});

関数_clearFunction(): void {

     クリア間隔(t);

       t = ヌル;

};

const マウスエンター = (): void => { 
 _clearFunction();
 状態.showDir = true;
 }; 

 定数mouseLeave = (): void => { 
  自動再生();
  状態.showDir = false; 
};