Vue3 でタイマーコンポーネントをカプセル化する方法

<テンプレート>
  <div class="xtx-numbox">
    <div class="label"><スロット /></div>
    <div class="numbox">
      <a href="javascript:;" @click="handleSub(-1)">-</a>
      <input type="text" 読み取り専用 :value="num" />
      <a href="javascript:;" @click="handleSub(1)">+</a>
    </div>
  </div>
</テンプレート>
<スクリプト>
// 双方向バインディングを実装するためのサードパーティメソッド useVModel import { useVModel } from '@vueuse/core'
エクスポートデフォルト{
  名前: 'XtxNumbox',
  小道具: {
    モデル値: {
      タイプ: 数値、
      デフォルト: 1
    }
  },
  セットアップ(props, { 出力 }) {
    //useVModelメソッドは3つのパラメータを受け取ります。
    // パラメータ 1: カスタム プロパティ props は、v-model 双方向バインディングを通じて親コンポーネントから渡されたデータを受け取ります // パラメータ 2: props で渡されるデータ // パラメータ 3: バインドされたデータを発行するには、emit イベントを通じて親コンポーネントに通知する必要があります const num = useVModel(props, 'modelValue', emitting)
    定数handleSub = n => {
      (n < 0) の場合 {
        数値 -= 1
        (props.modelValue === 1)の場合{
          数値 = 1
        }
      } それ以外 {
        数値 += 1
      }
    }
    戻り値: { handleSub, num }
  }
}
</スクリプト>
<style スコープ lang="less">
.xtx-numbox {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  .ラベル {
    幅: 60ピクセル;
    色: #999;
    左パディング: 10px;
  }
  .nu​​mbox {
    幅: 120ピクセル;
    高さ: 30px;
    境界線: 1px 実線 #e4e4e4;
    ディスプレイ: フレックス;
    > {
      幅: 29px;
      行の高さ: 28px;
      テキスト配置: 中央;
      背景: #f8f8f8;
      フォントサイズ: 16px;
      色: #666;
      &:最初の型 {
        右境界線: 1px 実線 #e4e4e4;
      }
      &:最後の型 {
        左境界線: 1px 実線 #e4e4e4;
      }
    }
    > 入力 {
      幅: 60ピクセル;
      パディング: 0 5px;
      テキスト配置: 中央;
      色: #666;
    }
  }
}
</スタイル>

<XtxNumbox v-model="num">数量</XtxNumbox>