Entwurfsmuster für die Kommunikation zwischen Vue.js-Komponenten

Als Entwickler möchten wir verwaltbaren und wartbaren Code produzieren, der sich auch einfacher debuggen und testen lässt. Um dies zu erreichen, verwenden wir Best Practices, sogenannte Muster. Muster sind bewährte Algorithmen und Architekturen, die uns dabei helfen, bestimmte Aufgaben effizient und vorhersehbar zu erledigen.

In diesem Tutorial werfen wir einen Blick auf die häufigsten Kommunikationsmuster von Vue.js-Komponenten sowie auf einige Fallstricke, die wir vermeiden sollten. Wir alle wissen, dass es im wirklichen Leben nicht für jedes Problem eine einzige Lösung gibt. Ebenso gibt es bei der Anwendungsentwicklung von Vue.js kein universelles Muster, das für alle Programmierszenarien gilt. Jeder Modus hat seine eigenen Vor- und Nachteile und ist für bestimmte Anwendungsfälle geeignet.

Das Wichtigste für Vue.js-Entwickler ist, alle gängigsten Muster zu verstehen, damit wir das richtige für ein bestimmtes Projekt auswählen können. Dies führt zu einer korrekten und effizienten Komponentenkommunikation.

Warum ist die richtige Komponentenkommunikation wichtig?

Wenn wir eine App mit einem komponentenbasierten Framework wie Vue.js erstellen, ist es unser Ziel, die Komponenten der App so isoliert wie möglich zu halten. Dadurch sind sie wiederverwendbar, wartbar und testbar. Um eine Komponente wiederverwendbar zu machen, müssen wir sie in eine abstraktere und entkoppelte (oder lose gekoppelte) Form bringen, damit wir sie zu unserer Anwendung hinzufügen oder entfernen können, ohne die Funktionalität der Anwendung zu beeinträchtigen.

Allerdings können wir keine vollständige Isolation und Unabhängigkeit zwischen den Komponenten der Anwendung erreichen. Irgendwann müssen sie miteinander kommunizieren: Daten austauschen, den Status der Anwendung ändern usw. Daher ist es für uns wichtig zu lernen, wie man diese Kommunikation richtig macht und gleichzeitig die Funktionalität, Flexibilität und Skalierbarkeit der Anwendung beibehält.

Vue.js-Komponentenkommunikationsübersicht

In Vue.js gibt es zwei Haupttypen der Kommunikation zwischen Komponenten:

1. Direkte Eltern-Kind-Kommunikation, basierend auf strengen Eltern-Kind- und Kind-Eltern-Beziehungen.
2. Komponentenübergreifende Kommunikation, bei der eine Komponente mit jeder anderen Komponente „sprechen“ kann, unabhängig von ihrer Beziehung.

In den folgenden Abschnitten werden wir beide Typen anhand geeigneter Beispiele untersuchen.

Direkte Eltern-Kind-Kommunikation

Das Standardmodell für die Komponentenkommunikation, das Vue.js standardmäßig unterstützt, ist das Eltern-Kind-Modell, das durch Requisiten und benutzerdefinierte Ereignisse implementiert wird. Im Bild unten können Sie dieses Modell visuell in Aktion sehen.

Wie Sie sehen, kann ein Elternteil nur mit seinen direkten Kindern kommunizieren, und ein Kind kann nur direkt mit seinem Elternteil kommunizieren. In diesem Modell ist keine Peer- oder komponentenübergreifende Kommunikation möglich.

In den folgenden Abschnitten werden wir die Komponenten im Bild oben nehmen und sie in einer Reihe praktischer Beispiele umsetzen.

Eltern-Kind-Kommunikation

Angenommen, die Komponente, die wir haben, ist Teil eines Spiels. Bei den meisten Spielen wird der Spielstand irgendwo in der Benutzeroberfläche angezeigt. Stellen Sie sich vor, wir deklarieren eine Variable in der Komponente Parent Ascore und möchten sie in der Komponente Child A anzeigen. Wie können wir das also tun?

Um Daten vom Elternteil zum Kind zu senden, verwendet Vue.js Requisiten. Die Übergabe von Attributen erfordert drei notwendige Schritte:

1. Registrieren Sie die Eigenschaften des Kindes wie folgt: props: ["score"]
2. Verwenden Sie die in der untergeordneten Vorlage registrierten Attribute wie folgt: <span>分数：{{ Score }}</span>
3. Binden Sie die Eigenschaft wie folgt an die Variable score 变量（在父级模板中），如下所示：<child-a :score="score"></child-a> (in der übergeordneten Vorlage): <child-a :score="score"></child-a>

Lassen Sie uns ein vollständiges Beispiel untersuchen, um besser zu verstehen, was tatsächlich passiert:

// HTML part

<div id="app">
  <grand-parent/>
</div>

// JavaScript part

Vue.component('ChildB',{
  template:`
    <div id="child-b">
      <h2>Child B</h2>
      <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data {{ this.$data }}

Nach dem Login kopieren

Nach dem Login kopieren