Vueは、商品の数を制御するためのコンポーネントのパッケージ化と使用を実装します。

<テンプレート>
    <div class="xtx-numbox">
    <div class="label">
      <スロット />
    </div>
    <div class="numbox">
      <a href="javascript:;" @click='toggle(-1)'>-</a>
      <input type="text" 読み取り専用 :value="num">
      <a href="javascript:;" @click='toggle(1)'>+</a>
    </div>
  </div>
</テンプレート>
<スクリプト>
'@vueuse/core' から {useVModel} をインポートします。

エクスポートデフォルト{
  名前: 'XtxNumbox',
  小道具: {
    モデル値: {
      タイプ: 数値、
      デフォルト: 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 < 10) {
          数値 += 1
        }
      }
    }
    { 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;
    }
  }
}
</スタイル>

<Numbox v-model='num' >数量</XtxNumbox>
設定（）{
 //商品数//デフォルト値は1
  定数num = ref(1)
  戻る {
    番号 
  }
}