Grundlegende Nutzungsdetails zur Vue-Komponentenbildung

Vorwort:

Manchmal gibt es einen Satz strukturierten HTML-Code, und Ereignisse können daran gebunden sein. Dann kann dieser Code an mehreren Stellen verwendet werden. Wenn er hier und da kopiert wird, wiederholt sich viel Code, einschließlich des Codes im Ereignisteil. Dann können wir diese Codes jetzt in eine Komponente kapseln und sie bei künftiger Verwendung einfach wie gewöhnliche html Elemente verwenden.

1. Was ist Komponentenbildung?

vue.js verfügt über zwei Wunderwaffen: eine ist datengesteuert, die andere ist die Komponentenbildung. Die Frage ist also, was ist Komponentenbildung und warum brauchen wir Komponentenbildung? Als Nächstes werde ich diese beiden Fragen nacheinander beantworten. Die sogenannte Komponentenbildung besteht darin, die Seite in mehrere Komponenten aufzuteilen und CSS , JS , Vorlagen-, Bild- und anderen Ressourcen, von denen jede Komponente abhängt, gemeinsam zu entwickeln und zu verwalten. Da Komponenten ressourcenunabhängig sind, können sie im System wiederverwendet und verschachtelt werden. Bei komplexen Projekten kann die Codemenge erheblich vereinfacht werden, und spätere Änderungen und Wartung sind einfacher.

2. Grundlegende Verwendung

<div id="app">
  <Schaltflächenzähler></Schaltflächenzähler>
  <Schaltflächenzähler></Schaltflächenzähler>
  <Schaltflächenzähler></Schaltflächenzähler>
</div>
<Skript>
  // Definieren Sie eine neue Komponente namens Button-Counter Vue.component('ButtonCounter', {
    Daten: Funktion () {
      zurückkehren {
        Anzahl: 0
      }
    },
    Vorlage: '<button @click="count++">{{ count }} Mal geklickt</button>'
  })
  const app = new Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo"
    }
  })
</Skript>

Oben haben wir eine Komponente namens button-counter erstellt, die die Funktion implementiert, aufzuzeichnen, wie oft auf eine Schaltfläche geklickt wird. Wenn wir es später verwenden möchten, können wir es einfach über button-counter verwenden. Da es sich bei den Komponenten um wiederverwendbare Vue Instanzen handelt, erhalten sie dieselben Optionen wie new Vue , z. B. data , computed , watch , methods und Lebenszyklus-Hooks. Die einzigen Ausnahmen sind root-instanzspezifische Optionen wie el.

Außerdem ist zu beachten, dass data in der Komponente eine Funktion sein müssen!

Werfen wir einen Blick auf die erzielten Ergebnisse:

Wir haben die button-counter oben dreimal verwendet, sodass auf der Seite drei davon angezeigt werden und jede Komponente ihren count unabhängig verwaltet, da bei jeder Verwendung einer Komponente eine neue Instanz davon erstellt wird. Jede Instanz kann eine unabhängige Kopie des zurückgegebenen Objekts verwalten, weshalb wir die Funktion in data verwenden

Dies ist das Ende dieses Artikels über die grundlegenden Nutzungsdetails der Vue-Komponentenbildung. Weitere relevante Inhalte zur Nutzung der Vue-Komponentenbildung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!