vue3 を使用してカウント関数コンポーネントのカプセル化例を実装する

<テンプレート>
  <div class="my-numbox">
    <div class="label">
      <slot>数量</slot>
    </div>
    <div class="numbox">
      <a href="javascript:;" @click="toggle(-1)" :class="{notallow: modelValue === 1}">-</a>
      <input type="text" 読み取り専用 :value="num">
      <a href="javascript:;" @click="toggle(1)" :class="{notallow: modelValue === inventory}">+</a>
    </div>
  </div>
</テンプレート>
<スクリプト>
'@vueuse/core' から {useVModel} をインポートします。
エクスポートデフォルト{
  名前: 'MyNumbox',
  小道具: {
    モデル値: {
      タイプ: 数値、
      デフォルト: 1
    },
    在庫：
      タイプ: 数値、
      必須: true
    }
  },
  セットアップ（props、{emit}）{
    // サードパーティのメソッドによって制御されるデータの双方向バインディング const num = useVModel(props, 'modelValue', emitting)
    // 製品データの変更操作を制御する const Toggle = (n) => {
      (n < 0) の場合 {
        // 1つ減算する if (num.value > 1) {
          数値 -= 1
        }
      } それ以外 {
        // 1つの操作を追加します if (num.value < props.inventory) {
          数値 += 1
        }
      }
    }
    { num, トグル } を返す
  }
}
</スクリプト>
<style スコープ lang="less">
.my-numbox {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  .notallow{
    カーソル: 許可されていません。
  }
  .ラベル {
    幅: 60ピクセル;
    色: #999;
    左パディング: 10px;
  }
  .nu​​mbox {
    幅: 120ピクセル;
    高さ: 30px;
    境界線: 1px 実線 #e4e4e4;
    ディスプレイ: フレックス;
    > {
      幅: 29px;
      行の高さ: 28px;
      テキスト配置: 中央;
      テキスト装飾: なし;
      背景: #f8f8f8;
      フォントサイズ: 16px;
      色: #666;
      &:最初の型 {
        右境界線:1px 実線 #e4e4e4;
      }
      &:最後の型 {
        左境界線:1px 実線 #e4e4e4;
      }
    }
    > 入力 {
      幅: 60ピクセル;
      パディング: 0 5px;
      テキスト配置: 中央;
      色: #666;
    }
  }
}
</スタイル>

<テンプレート>
  <div class="home-banner">
    <MyNumbox v-model="num" :inventory="5">アイテム数:</MyNumbox>
  </div>
</テンプレート>

<スクリプト>
'vue' から { ref } をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
  設定 （） {
    定数num = ref(1)
    { 数値 } を返す
  }
}
</スクリプト>

<スタイル lang="less">
.ホームバナー{
  マージン: 100px 自動;
  幅: 500ピクセル;
  高さ: 100px;
}
</スタイル>