Lösungen für Komponentendatenflussprobleme in vue.js

Dieser Artikel stellt hauptsächlich die Probleme im Zusammenhang mit dem Datenfluss von vue.js-Komponenten vor. Der Herausgeber findet ihn recht gut. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf

1. Komponenten

Man kann sagen, dass Komponenten ein wesentlicher Bestandteil des modernen Frontends sind Rahmen. Die Verwendung von Komponenten kann nicht nur die Wiederverwendungsrate von Code und die Entwicklungseffizienz von Entwicklern erheblich verbessern, sondern ist auch für die spätere Wartung des Codes von großer Bedeutung. Bei der Front-End-Entwicklung ist WebComponent aus historischen Gründen zwar einfach zu verwenden, seine Entwicklung ist jedoch wie bei vielen neuen Front-End-Technologien unerreichbar. Ausgehend von dieser Situation versuchen kluge Entwickler, die Komponentisierung durch die Integration entsprechender Funktionen in das Framework zu vervollständigen. Verschiedene moderne Frontend-Frameworks verfügen grundsätzlich über eigene Implementierungen. Hier analysieren wir die Komponenten von Vue und konzentrieren uns dabei auf den Datenfluss.

2. Vue-Komponenten

Vue-Komponenten basieren beim Erstellen von Vorlagen auf gewöhnlichem HTML, und es ist nicht erforderlich, jsx, Lenker, usw. Spezielle Syntax, daher sind die Lernkosten relativ gering und der Einstieg einfacher. Bei der Verwendung von Vue-Komponenten ist diese im Allgemeinen in zwei Teile unterteilt: Komponentenregistrierung und Komponentenaufruf.

(1) Komponentenregistrierung

Vue.component('pop-box', {
  template:  &#39;<p class="component-box">\
    <p class="component-content">\
    ..........
    </p>\
  </p>&#39;,

  props: [...],

  data: function () {
    return ...;
  },

  methods: {
    ...
  },

  mounted () {
    ...
  },

  ...
});

Mit der Vue.component-Methode können wir ganz einfach global verfügbare Komponenten erstellen, Natürlich können Sie auch lokale Komponenten innerhalb von Instanzen oder Komponenten registrieren, aber die Prinzipien sind ähnlich. Der erste Parameter von Vue.component ist der Name der Komponente oder die eindeutige Kennung (ID). Nachfolgende Aufrufe verwenden diesen Namen, um sie aufzurufen. Der zweite Parameter ist ein Objekt, das normalerweise die Vorlage (Template) und den Komponentenschlüssel enthält Informationen wie Daten (Daten, berechnet), Methoden (Methoden), Hook-Funktionen (erstellt, gemountet ...), die darin verwaltet werden.

Es ist erwähnenswert:

1. Die Daten in der Komponente müssen eine Funktion sein und ihr Rückgabewert wird als tatsächliche „Daten“ verwendet.

2. Die Hook-Funktionen von vue1.x und vue2.x unterscheiden sich geringfügig. Wenn Sie feststellen, dass die Hook-Funktion nicht wirksam wird, denken Sie daran, die Vue-Version zu bestätigen.

(2) Komponentenaufruf

(1) Start-Tag + End-Tag-Modus

<pop-box text="200" v-bind:number="200"></pop-box>

(2) Kein End-Tag-Modus

<pop-box text="200" v-bind:number="200" />

Es gibt die beiden oben genannten Modi zum Aufrufen von Vue-Komponenten. Es gibt eigentlich keinen Unterschied zwischen den beiden Modi, wenn kein Slot verwendet wird. Wenn Sie jedoch einen Slot verwenden müssen, können Sie nur den Modus verwenden, der sowohl das Start-Tag als auch das End-Tag enthält.

Es ist zu beachten, dass beim Binden der oben genannten Daten direkt die Form von property="value" verwendet wird. Unabhängig davon, ob der Wert eine Zahl oder eine Zeichenfolge ist, handelt es sich bei der Eigenschaft letztendlich um einen Zeichenfolgentyp . Wenn es sich um einen numerischen Typ handeln soll, verwenden Sie die Form v-bind:property="value" oder abgekürzt als :property="value".

3. Vue-Komponentendatenfluss

vue folgt dem Prinzip des typischen einseitigen Datenflusses, das heißt, Daten werden immer weitergeleitet Die übergeordnete Komponente Wenn es um untergeordnete Komponenten geht, kann die untergeordnete Komponente ihre eigenen Daten verwalten, hat jedoch nicht das Recht, die von der übergeordneten Komponente an sie übergebenen Daten zu ändern. Wenn Entwickler dies versuchen, wird dies der Fall sein einen Fehler melden. Dies hat den Vorteil, dass verhindert wird, dass mehrere untergeordnete Komponenten versuchen, den Status der übergeordneten Komponente zu ändern, wodurch dieses Verhalten schwer nachvollziehbar wird. Die spezifische Implementierungsmethode in Vue lautet wie folgt:

Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente, indem sie Requisiten bindet, die untergeordnete Komponente selbst verfügt jedoch nicht über diese Recht, diese zu ändern. Wenn Sie die Daten ändern möchten, können Sie die Änderung nur über ein Ereignis an die übergeordnete Komponente melden, und die übergeordnete Komponente entscheidet selbst, wie die Daten verarbeitet werden.

(1) Einfaches Beispiel

<p id="app">
  <my-counter @inc="increase" :counter="counter"></my-counter>
</p>
...
Vue.component(&#39;my-counter&#39;, {
  template:  &#39;<p class="counter">\
    <p>{{counter}}</p>\
    <button @click="inc">increase</button>\
  </p>&#39;,

  props: [&#39;counter&#39;],

  methods: {
    inc: function () {
      this.$emit(&#39;inc&#39;);
    }
  }
});

var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    counter: 0
  },
  methods: {
    increase () {
      this.counter ++;
    }
  }
});

Um es einfacher zu machen, wird nur eine My-Counter-Komponente erstellt Als untergeordnete Komponente können wir die Vue-Instanz vorübergehend als übergeordnete Komponente betrachten.

(2) Analyse der Datenflussanalyse

(1) Wir definieren Daten namens counter in der übergeordneten Komponente.
(2) Übergeben Sie beim Aufruf der Komponente den Zähler der übergeordneten Komponente in der Form :counter="counter" Im Unterkomponente;
(3) Die Unterkomponente liest den Zähler und zeigt ihn in der Vorlage an. (4) Wenn der Benutzer auf die Schaltfläche klickt, muss der Zähler erhöht werden Dieses Ereignis ändert jedoch nicht direkt den Zähler, sondern meldet das Ereignis, das der übergeordneten Komponente hinzugefügt werden muss, in Form eines benutzerdefinierten Ereignisses durch this.$emit('inc'); Komponente, da Sie durch Ausführen von @inc="increase" die von der untergeordneten Komponente gemeldeten Ereignisse überwachen und den Zähler in Ihrer eigenen Erhöhungsmethode erhöhen können
(7) Die Daten in der übergeordneten Komponente werden aktualisiert in der Unterkomponente wird ebenfalls automatisch aktualisiert, und der Schnittstelleninhalt wird ebenfalls aktualisiert. Dieser Vorgang wird vom Framework automatisch abgeschlossen.



(3) Zusammenfassung

Das obige Beispiel zeigt im Grunde den Hauptdatenfluss von Vue vollständig, aber diese Prop/Evnet-basierte Methode ist nur geeignet Für Komponenten mit einer direkten Eltern-Kind-Beziehung wird es sehr problematisch, wenn der Datenfluss von Geschwisterkomponenten oder einer großen Anzahl von Komponenten in diesem Fall in Betracht gezogen wird.

Das obige ist der detaillierte Inhalt vonLösungen für Komponentendatenflussprobleme in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!