Vue3.0 implementiert die Kapselung von Kontrollkästchenkomponenten

Vue3.0 implementiert die Kapselung von Kontrollkästchenkomponenten

In diesem Artikelbeispiel wird der spezifische Code von vue3.0 zur Implementierung der Kontrollkästchenkomponentenkapselung zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Allgemeine Schritte:

  • Realisieren Sie den Auswahl- und Abwahleffekt der Komponente selbst
  • Implementieren Sie die V-Model-Direktive der Komponente
  • In @vueuse/core -Funktionsschreiben umgewandelt
<!-- Grundlegender Komponentenstil -->
<Vorlage>
  <div Klasse="xtx-checkbox" @click="changeChecked()">
    <i v-if="geprüft" class="iconfont icon-geprüft"></i>
    <i v-else class="iconfont icon-unchecked"></i>
    <span v-if="$slots.default"><slot /></span>
  </div>
</Vorlage>

<Skript>
importiere { ref } von 'vue'
Standard exportieren {
  Name: "XtxCheckbox",
  aufstellen () {
    const geprüft = ref(false)
    const changeChecked = () => {
      geprüfter Wert = !geprüfter Wert
    }
    return { geprüft, geändert geprüft }
  }
}
</Skript>

<style scoped lang="weniger"> 
 // Der Stil kann nach Bedarf geändert werden.xtx-checkbox {
  Anzeige: Inline-Block;
  Rand rechts: 2px;
  .icon-geprüft {
    Farbe: @xtxColor;
    ~ Spanne {
      Farbe: @xtxColor;
    }
  }
  ich {
    Position: relativ;
    oben: 1px;
  }
  Spanne {
    Rand links: 2px;
  }
}
</Stil>
// Hinweis: Wenn Sie es global verwenden müssen, müssen Sie es als globale Komponente registrieren
<!-- Implementieren Sie die v-model-Direktive -->
... Lassen Sie die Struktur <script> weg.
importiere { toRef } von 'vue'
Standard exportieren {
  Name: "XtxCheckbox",
  Requisiten: {
    modelValue: { // Der Standardbindungswert von v-model ist modelValue
      Typ: Boolean,
      Standard: false
    }
  },
  setup (eigenschaften, { emit }) {
    const checked = toRef(props, 'modelValue') // Definieren Sie „checked“, um den empfangenen Booleschen Wert zu speichern const changeChecked = () => {
      emit('update:modelValue', !checked.value) // Übergebe den Wert an die übergeordnete Komponente, um das Kontrollkästchen zu aktivieren}
    return { geprüft, geändert geprüft }
  }
}
</Skript>
... Elliptischer Stil
<!-- Grundlegende Verwendung -->
<!-- Benutzerdefinierter Kontrollkästchentest -->
<xtx-checkbox v-model="checked">Benutzerdefiniertes Kontrollkästchen</xtx-checkbox>
<Skript>
importiere { ref } von 'vue'
Standard exportieren {
  Name: 'Unterkategorie',
  aufstellen () {
    const geprüft = ref(true)
    return { geprüft}
  }
}
</Skript> 

<!-- @vueuse/Kernfunktion schreiben -->
<Vorlage>
  <div Klasse="xtx-checkbox" @click='checked=!checked'>
    <i v-if="geprüft" class="iconfont icon-geprüft"></i>
    <i v-else class="iconfont icon-unchecked"></i>
    <span>
      <Steckplatz />
    </span>
  </div>
</Vorlage>

<Skript>
importiere { useVModel } von '@vueuse/core' // erfordert npm i @vueuse/core oder yarn add @vueuse/core
Standard exportieren {
  Name: "XtxCheckbox",
  Requisiten: {
    Modellwert: {
      Typ: Boolean,
      Standard: false
    }
  },
  setup (eigenschaften, { emit }) {
    // Den von der übergeordneten Komponente übergebenen Wert von modelValue abrufen const checked = useVModel(props, 'modelValue', emit)
    return { geprüft}
  }
}
</Skript>


// Verwendungsmethode wie oben <xtx-checkbox v-model="checked">Benutzerdefiniertes Kontrollkästchen</xtx-checkbox>
<Skript>
importiere { ref } von 'vue'
Standard exportieren {
  Name: 'Unterkategorie',
  aufstellen () {
    const geprüft = ref(true)
    return { geprüft}
  }
}
</Skript>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Vue3-Kompilierungsprozess - Quellcodeanalyse
  • Details zu 7 Arten der Komponentenkommunikation in Vue3
  • Detaillierte Erläuterung der Vue3-Kapselungsfunktion für Nachrichtenaufforderungsinstanzen
  • Der Unterschied und die Verwendung des Kommunikationsbusses der Bruderkomponenten von Vue2 und Vue3
  • Verwenden von vue3 zum Implementieren eines Beispiels für die Kapselung von Zählfunktionskomponenten
  • Vue3.0 implementiert die Kapselung des Dropdown-Menüs
  • Vergleich der Vorteile von vue3 und vue2
  • Praktischer Bericht über die Entwicklung von Vue3- und TypeScript-Projekten
  • Zusammenfassung der Projektentwicklungspraxis in Kombination mit Vue3 von TypeScript
  • Vue3 AST Parser-Quellcode-Analyse

<<:  So installieren Sie Nginx in Docker

>>:  MySQL-Variablenprinzipien und Anwendungsbeispiele

Artikel empfehlen

Die Verwendung des V-Modells in Vue3-Komponenten und ausführliche Erklärung

Inhaltsverzeichnis Verwenden Sie bidirektionale B...

Installations- und Konfigurationstutorial von MongoDB unter Linux

MongoDB -Installation Wählen Sie die Installation...

MySQL: Praktische Erfahrung mit der Verwendung der Insert-Anweisung

Inhaltsverzeichnis 1. Mehrere Syntaxen von Insert...

JavaScript implementiert kreisförmigen Fortschrittsbalkeneffekt

In diesem Artikelbeispiel wird der spezifische Ja...

Detaillierte Erklärung der MySQL-Datumsadditions- und -subtraktionsfunktionen

1. addtime() Füge die angegebene Anzahl Sekunden ...

Zusammenfassung der Methoden zum Abfragen von MySQL-Benutzerberechtigungen

Einführung von zwei Methoden zum Anzeigen von MyS...

Wie MySQL Milliarden von Datenverkehr unterstützt

Inhaltsverzeichnis 1 Master-Slave-Lese-/Schreibtr...

Beispiel für die Implementierung des Lastausgleichs mit Nginx+SpringBoot

Einführung in den Lastenausgleich Bevor wir die L...

Ausführliche Erläuterung der Konzepte und Verwendung von MySQL-Transaktionen

Inhaltsverzeichnis Der Begriff der Affären Der St...

Berechnung des Prozentwerts, wenn die CSS-Positionseigenschaft absolut ist

Wenn die Position absolut ist, wird der Prozentsa...