So kapseln Sie Timerkomponenten in Vue3

<Vorlage>
  <div Klasse="xtx-numbox">
    <div Klasse="Bezeichnung"><Slot /></div>
    <div Klasse="numbox">
      <a href="javascript:;" @click="handleSub(-1)">-</a>
      <input Typ="Text" schreibgeschützt :Wert="Anzahl" />
      <a href="javascript:;" @click="handleSub(1)">+</a>
    </div>
  </div>
</Vorlage>
<Skript>
// Drittanbietermethode useVModel zum Implementieren der bidirektionalen Bindung import { useVModel } von '@vueuse/core'
Standard exportieren {
  Name: "XtxNumbox",
  Requisiten: {
    Modellwert: {
      Typ: Nummer,
      Standard: 1
    }
  },
  setup(Eigenschaften, { emit }) {
    //Die Methode useVModel erhält drei Parameter,
    // Parameter 1: benutzerdefinierte Eigenschaft „props“ empfängt Daten, die von der übergeordneten Komponente über die bidirektionale V-Model-Bindung übergeben werden // Parameter 2: in „props“ zu übergebende Daten // Parameter 3: gebundene Daten müssen die übergeordnete Komponente über das „Emit“-Ereignis benachrichtigen const num = useVModel(props, „modelValue“, emit)
    const handleSub = n => {
      wenn (n < 0) {
        num.value -= 1
        wenn (props.modelValue === 1) {
          Num.Wert = 1
        }
      } anders {
        num.value += 1
      }
    }
    return { handleSub, num }
  }
}
</Skript>
<style scoped lang="weniger">
.xtx-numbox {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  .Etikett {
    Breite: 60px;
    Farbe: #999;
    Polsterung links: 10px;
  }
  .numbox {
    Breite: 120px;
    Höhe: 30px;
    Rand: 1px durchgezogen #e4e4e4;
    Anzeige: Flex;
    > ein {
      Breite: 29px;
      Zeilenhöhe: 28px;
      Textausrichtung: zentriert;
      Hintergrund: #f8f8f8;
      Schriftgröße: 16px;
      Farbe: #666;
      &:erster-vom-Typ {
        Rahmen rechts: 1px durchgezogen #e4e4e4;
      }
      &:letzter-vom-Typ {
        Rahmen links: 1px durchgezogen #e4e4e4;
      }
    }
    > Eingabe {
      Breite: 60px;
      Polsterung: 0,5px;
      Textausrichtung: zentriert;
      Farbe: #666;
    }
  }
}
</Stil>

<XtxNumbox v-model="num">Menge</XtxNumbox>