Tiefgreifendes Verständnis der sieben Kommunikationsmethoden von Vue-Komponenten

Die Art und Weise, wie Vue-Komponenten kommunizieren, ist eine sehr häufig gestellte Frage in Vorstellungsgesprächen. Diese Frage begegnete mir oft, als ich anfing, nach einem Praktikum zu suchen. Damals wusste ich nur, dass ich zu Props und $emit zurückkehren musste. Später, als ich mehr erfuhr, stellte ich fest, dass es so viele Möglichkeiten für die Kommunikation von Vue-Komponenten gibt!

Heute werde ich die Kommunikationsmethoden der Vue-Komponenten zusammenfassen. Wenn etwas ausgelassen wird, hinterlassen Sie bitte eine Nachricht.

1. Requisiten/$emit

Einführung

Ich glaube, jeder ist mit Props und $emit, unserer am häufigsten verwendeten Vue-Kommunikationsmethode, sehr vertraut.

Requisiten: Requisiten können ein Array oder ein Objekt sein, das zum Empfangen von Daten verwendet wird, die über v-bind von der übergeordneten Komponente übergeben werden. Wenn „props“ ein Array ist, werden die von der übergeordneten Komponente übergebenen Eigenschaften direkt empfangen. Wenn „props“ ein Objekt ist, können der Eigenschaftstyp, der Standardwert, ob es erforderlich ist und die Validierungsregeln über Konfigurationen wie „Typ“, „Standard“, „Erforderlich“ und „Validator“ festgelegt werden.

$emit: Wenn über- und untergeordnete Komponenten kommunizieren, verwenden wir normalerweise $emit, um das v-on der übergeordneten Komponente auszulösen und den entsprechenden Ereignislistener an die untergeordnete Komponente zu binden.

Codebeispiel

Der folgende Code implementiert die Kommunikation zwischen übergeordneten und untergeordneten Komponenten von Props und $emit. In diesem Beispiel haben wir die folgende Kommunikation implementiert:

Übergeben von Werten vom übergeordneten Element an das untergeordnete Element: Die übergeordnete Komponente übergibt den Nachrichtenwert der übergeordneten Komponente an die untergeordnete Komponente über: messageFromParent = "message". Wenn das Eingabe-Tag der übergeordneten Komponente eingegeben wird, ändert sich der Inhalt im p-Tag der untergeordneten Komponente entsprechend.

Übergeben von Werten vom Kind an das Elternteil: Die übergeordnete Komponente bindet den Listener des Empfangsereignisses über @on-receive="receive" an die untergeordnete Komponente. Wenn das Eingabe-Tag der untergeordneten Komponente eingegeben wird, wird die Empfangs-Rückruffunktion ausgelöst. Der Wert der Nachricht der untergeordneten Komponente wird über this.$emit('on-receive', this.message) der übergeordneten Komponente messageFromChild zugewiesen, wodurch der Inhalt des p-Tags der übergeordneten Komponente geändert wird.

Bitte sehen Sie sich den Code an:

// Unterkomponentencode <template>
  <div Klasse="Kind">
    <h4>Dies ist eine untergeordnete Komponente</h4>
    <input type="text" v-model="nachricht" @keyup="senden" />
    <p>Eine Nachricht von der übergeordneten Komponente erhalten: {{ messageFromParent }}</p>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "Kind",
  props: ['messageFromParent'], // Nachrichten von übergeordneten Komponenten über props data() { empfangen
    zurückkehren {
      Nachricht: '',
    }
  },
  Methoden: {
    schicken() {
      this.$emit('on-receive', this.message) // Löse das On-Receive-Ereignis über $emit aus, rufe den Empfangs-Callback in der übergeordneten Komponente auf und verwende this.message als Parameter},
  },
}
</Skript>

// Code der übergeordneten Komponente <template>
  <div Klasse="übergeordnet">
    <h3>Dies ist die übergeordnete Komponente</h3>
    <input Typ="Text" v-Modell="Nachricht" />
    <p>Eine Nachricht von einer untergeordneten Komponente empfangen: {{ messageFromChild }}</p>
    <Child :messageFromParent="Nachricht" @on-receive="empfangen" />
  </div>
</Vorlage>
<Skript>
Kind aus './child' importieren
Standard exportieren {
  Name: "Übergeordnetes Element",
  Daten() {
    zurückkehren {
      Nachricht: '', // An die untergeordnete Komponente übermittelte Nachricht messageFromChild: '',
    }
  },
  Komponenten:
    Kind,
  },
  Methoden: {
    receive(msg) { // Informationen der untergeordneten Komponente empfangen und an messageFromChild zuweisen
      this.messageFromChild = Nachricht
    },
  },
}
</Skript>

Effektvorschau

2. V-Steckplatz

Einführung

v-slot ist eine neue API, die in Vue2.6 zur einheitlichen Implementierung von Slots und benannten Slots hinzugefügt wurde und zum Ersetzen von APIs wie Slot (aufgegeben in 2.6.0), Slot-Scope (aufgegeben in 2.6.0) und Scope (aufgegeben in 2.5.0) verwendet wird.

v-slot wird im Vorlagentag verwendet, um einen benannten Slot oder einen Slot bereitzustellen, der Props empfangen muss. Wenn v-slot nicht angegeben ist, wird der Standardwert verwendet.

Codebeispiel

Bitte sehen Sie sich das Codebeispiel für V-Slot unten an. In diesem Beispiel haben wir Folgendes erreicht:

Wertweitergabe vom übergeordneten Element an das untergeordnete Element: Die übergeordnete Komponente übergibt den Nachrichtenwert der übergeordneten Komponente an die untergeordnete Komponente über <template v-slot:child>{{ message }}</template>, und die untergeordnete Komponente empfängt den entsprechenden Inhalt über <slot name="child"></slot>, wodurch die Wertübertragung vom übergeordneten Element an das untergeordnete Element realisiert wird.

// Unterkomponentencode <template>
  <div Klasse="Kind">
    <h4>Dies ist eine untergeordnete Komponente</h4>
    <p>Eine Nachricht von der übergeordneten Komponente erhalten:
      <slot name="child"></slot> <!--Zeigt die {{message}} an, die von der übergeordneten Komponente über den Slot übergeben wurde-->
    </p>
  </div>
</Vorlage>

<Vorlage>
  <div Klasse="übergeordnet">
    <h3>Dies ist die übergeordnete Komponente</h3>
    <input Typ="Text" v-Modell="Nachricht" />
    <Kind>
      <Vorlage v-slot:child>
        {{ message }} <!--Der im Slot anzuzeigende Inhalt-->
      </Vorlage>
    </Kind>
  </div>
</Vorlage>
<Skript>
Kind aus './child' importieren
Standard exportieren {
  Name: "Übergeordnetes Element",
  Daten() {
    zurückkehren {
      Nachricht: '',
    }
  },
  Komponenten:
    Kind,
  },
}
</Skript>

Effektvorschau

3. $refs/ $übergeordnet/ $untergeordnet/$root

Einführung

Wir können die Vue-Komponenteninstanz auch über $refs/$parent/$children/$root usw. abrufen und die an die Instanz gebundenen Eigenschaften und Methoden abrufen, um die Kommunikation zwischen Komponenten zu erreichen.

$refs: Normalerweise binden wir $refs an DOM-Elemente, um die Attribute von DOM-Elementen zu erhalten. Bei der Implementierung der Komponentenkommunikation können wir $refs auch an die untergeordnete Komponente binden, um die Instanz der untergeordneten Komponente zu erhalten.

$parent: Wir können this.$parent direkt in Vue verwenden, um die übergeordnete Komponenteninstanz der aktuellen Komponente (falls vorhanden) zu erhalten.

$children: In ähnlicher Weise können wir this.$children auch direkt in Vue verwenden, um das Array der untergeordneten Komponenteninstanzen der aktuellen Komponente zu erhalten. Es ist jedoch zu beachten, dass die Elementindizes im Array this.$children nicht unbedingt der Reihenfolge der von der übergeordneten Komponente referenzierten untergeordneten Komponenten entsprechen. Beispielsweise können asynchron geladene untergeordnete Komponenten ihre Reihenfolge im Array children beeinflussen. Daher müssen Sie bei der Verwendung die entsprechende Unterkomponente anhand bestimmter Bedingungen finden, beispielsweise anhand des Namens der Unterkomponente.

$root: Ruft die Stamm-Vue-Instanz des aktuellen Komponentenbaums ab. Wenn die aktuelle Instanz kein übergeordnetes Element hat, ist diese Instanz sie selbst. Durch $root können wir eine ebenenübergreifende Kommunikation zwischen Komponenten erreichen.

Codebeispiel

Schauen wir uns ein Beispiel für die Verwendung von $parent und $children an (da die Verwendung dieser APIs ähnlich ist, wird die Verwendung von $refs und $root hier nicht näher erläutert). In diesem Beispiel wird es wie folgt implementiert:

Übergeben von Werten vom übergeordneten Element an das untergeordnete Element: Die untergeordnete Komponente erhält den Wert der Nachricht in der übergeordneten Komponente über $parent.message.

Übergeben von Werten vom Kind an das übergeordnete Element: Die übergeordnete Komponente erhält das Array der Instanzen der untergeordneten Komponente über $children, durchläuft dann das Array, erhält die entsprechende Instanz der untergeordneten Komponente Child1 über den Instanznamen und weist sie child1 zu und erhält dann die Nachricht der untergeordneten Komponente Child1 über child1.message.

Der Code lautet wie folgt:

// Unterkomponente <template>
  <div Klasse="Kind">
    <h4>Dies ist eine untergeordnete Komponente</h4>
    <input Typ="Text" v-Modell="Nachricht" />
    <p>Eine Nachricht von der übergeordneten Komponente empfangen: {{ $parent.message }}</p> <!--Nachricht der übergeordneten Komponenteninstanz anzeigen-->
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Kind1',
  Daten() {
    zurückkehren {
      Nachricht: '', // Die übergeordnete Komponente kann die Nachricht der untergeordneten Komponenteninstanz hierüber abrufen.$children
    }
  },
}
</Skript>

// Übergeordnete Komponente <template>
  <div Klasse="übergeordnet">
    <h3>Dies ist die übergeordnete Komponente</h3>
    <input Typ="Text" v-Modell="Nachricht" />
    <p>Eine Nachricht von einer untergeordneten Komponente empfangen: {{ child1.message }}</p> <!--Nachricht der untergeordneten Komponenteninstanz anzeigen-->
    <Kind />
  </div>
</Vorlage>
<Skript>
Kind aus './child' importieren
Standard exportieren {
  Name: "Übergeordnet",
  Daten() {
    zurückkehren {
      Nachricht: '',
      Kind1: {},
    }
  },
  Komponenten:
    Kind,
  },
  montiert() {
    dies.Kind1 = dies.$Kinder.find((Kind) => {
      return child.$options.name === 'Child1' // Holen Sie sich die untergeordnete Instanz des entsprechenden Namens über options.name})
  },
}
</Skript>

Effektvorschau

4. $attrs/$listener

Einführung

$attrs und $listeners sind beides neue Attribute, die in Vue2.4 hinzugefügt wurden und hauptsächlich von Benutzern zur Entwicklung erweiterter Komponenten verwendet werden.

$attrs: Wird verwendet, um Attributeigenschaften zu empfangen, die im übergeordneten Bereich nicht als Props erkannt werden, und kann über v-bind="$attrs" an interne Komponenten übergeben werden – sehr nützlich beim Erstellen von Komponenten auf hoher Ebene.

Stellen Sie sich vor, Sie müssen beim Erstellen einer Komponente Dutzende von Parametern wie param1, param2, param3 usw. empfangen. Wenn Sie Props verwenden, müssen Sie viele davon über Props deklarieren: ['param1', 'param2', 'param3', ...]. Noch problematischer wäre es, wenn einige dieser Eigenschaften an tiefere Unterkomponenten weitergegeben werden müssten.

Wenn Sie $attrs verwenden, benötigen Sie keine Deklarationen. Sie können es direkt über $attrs.param1, $attrs.param2 usw. verwenden. Oben sind auch Beispiele für die Übergabe an tiefe Unterkomponenten angegeben, was sehr praktisch ist.

$listeners: Enthält die v-on-Ereignislistener im übergeordneten Bereich. Es kann über v-on="$listeners" an innere Komponenten übergeben werden – sehr nützlich beim Erstellen von Komponenten höherer Ebene, bei denen die Übergabemethode $attrs sehr ähnlich ist.

Codebeispiel

In diesem Beispiel gibt es drei Komponenten: A, B und C und ihre Beziehung ist: [A [B [C]]], wobei A die übergeordnete Komponente von B und B die übergeordnete Komponente von C ist. Das heißt: Ebene 1 Komponente A, Ebene 2 Komponente B, Ebene 3 Komponente C. Wir haben Folgendes erreicht:

Übergeben von Werten vom übergeordneten Element an das untergeordnete Element: Komponente A der Ebene 1 übergibt das Nachrichtenattribut an Komponente B der Ebene 2 über :messageFromA="message", und Komponente B der Ebene 2 erhält die Nachricht von Komponente A der Ebene 1 über $attrs.messageFromA.

:messageFromA="Nachricht"
v-bind="$attrs"
$attrs.messageFromA

Übergeben von Werten vom Kind an das Elternteil: Komponente A der Ebene 1 bindet den Keyup-Ereignislistener über @keyup="receive" an die untergeordnete Komponente, und Komponente B der Ebene 2 bindet das Keyup-Ereignis über v-on="$listeners" an ihr Eingabetag. Wenn eine Eingabe in das Eingabefeld der Komponente B der Ebene 2 erfolgt, wird der Empfangsrückruf der Komponente A der Ebene 1 ausgelöst und der Wert im Eingabefeld der Komponente B der Ebene 2 wird der messageFromComp der Komponente A der Ebene 1 zugewiesen, wodurch Werte vom untergeordneten Element zum übergeordneten Element übertragen werden.

@keyup="empfangen"
<CompC v-on="$listeners" />
v-on="$listeners"

Der Code lautet wie folgt:

// Ebene 3 Komponente C
<Vorlage>
  <div Klasse="compc">
    <h5>Dies ist eine C-Komponente</h5>
    <input name="compC" type="text" v-model="message" v-on="$listeners" /> <!--Bindet den Keyup-Listener-Callback von Komponente A an die Eingabe-->
    <p>Eine Nachricht von Komponente A erhalten: {{ $attrs.messageFromA }}</p>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Compc',
  Daten() {
    zurückkehren {
      Nachricht: '',
    }
  },
}
</Skript>

// Ebene 2 Komponente B
<Vorlage>
  <div Klasse="compb">
    <h4>Dies ist die B-Komponente</h4>
    <input name="compB" type="text" v-model="message" v-on="$listeners" /> <!--Bindet den Keyup-Listener-Callback von Komponente A an die Eingabe-->
    <p>Eine Nachricht von Komponente A erhalten: {{ $attrs.messageFromA }}</p>
    <CompC v-bind="$attrs" v-on="$listeners" /> <!--Übergeben Sie den Listener-Callback des Keyup von Komponente A an Komponente C und übergeben Sie die von Komponente A übergebenen Attribute an Komponente C-->
  </div>
</Vorlage>
<Skript>
CompC aus „./compC“ importieren
Standard exportieren {
  Name: 'CompB',
  Komponenten:
    CompC,
  },
  Daten() {
    zurückkehren {
      Nachricht: '',
    }
  },
}
</Skript>

// Eine Komponente <template>
  <div Klasse="compa">
    <h3>Dies ist eine Komponente</h3>
    <input Typ="Text" v-Modell="Nachricht" />
    <p>Nachricht von {{ comp }} empfangen: {{ messageFromComp }}</p>
    <CompB :messageFromA="message" @keyup="receive" /> <!--Hört auf das Keyup-Ereignis der untergeordneten Komponente und übergibt die Nachricht an die untergeordnete Komponente-->
  </div>
</Vorlage>
<Skript>
importiere CompB aus './compB'
Standard exportieren {
  Name: 'CompA',
  Daten() {
    zurückkehren {
      Nachricht: '',
      messageFromComp: '',
      Zusammensetzung: '',
    }
  },
  Komponenten:
    KompB,
  },
  Methoden: {
    receive(e) { // Auf den Rückruf des Keyup-Ereignisses der abgeleiteten Komponente warten und messageFromComp den Wert des Eingabefelds zuweisen, in dem sich das Keyup befindet.
      this.comp = e.ziel.name
      this.messageFromComp = e.ziel.wert
    },
  },
}
</Skript>

Effektvorschau

5. bereitstellen/einspritzen

Einführung

Das Optionspaar „Provide“/„Inject“ sollte zusammen verwendet werden, um einer Vorgängerkomponente das Einfügen einer Abhängigkeit in alle ihre Nachkommen zu ermöglichen, unabhängig davon, wie tief die Komponentenhierarchie ist, und immer wirksam, solange die Upstream- und Downstream-Beziehungen bestehen. Wenn Sie mit React vertraut sind, werden Sie sofort an die Context API denken, die sehr ähnlich ist.

provide: ist ein Objekt oder eine Funktion, die ein Objekt zurückgibt. Dieses Objekt enthält Eigenschaften, die in seine Nachkommen eingefügt werden können, dh die Attribute und Attributwerte, die an die Nachkommen weitergegeben werden sollen.

injcet: ein Array von Zeichenfolgen oder ein Objekt. Wenn es sich um ein Zeichenfolgenarray handelt, ist die Verwendung sehr ähnlich zu „Props“, mit der Ausnahme, dass die empfangenen Attribute in „Provide“ von „Daten“ in „Attribute“ geändert werden. Wenn es sich um ein Objekt handelt, können Sie, ähnlich wie bei Requisiten, Standardwerte festlegen, indem Sie Eigenschaften wie „Standard“ und „Von“ konfigurieren, neue benannte Eigenschaften in Unterkomponenten verwenden usw.

Codebeispiel

In diesem Beispiel gibt es drei Komponenten: Komponente A der Ebene 1, Komponente B der Ebene 2 und Komponente C der Ebene 3: [A [B [C]]], wobei A die übergeordnete Komponente von B und B die übergeordnete Komponente von C ist. Das Beispiel implementiert:

Übergeben von Werten vom übergeordneten Element an das untergeordnete Element: Komponente A der Ebene 1 fügt über „provide“ Nachrichten in untergeordnete Komponenten ein, und Komponente B der Ebene 2 empfängt die Nachricht in Komponente A der Ebene 1 über „inject: ['messageFromA']“ und erhält den Inhaltseigenschaftswert der Nachricht in Komponente A der Ebene 1 über „messageFromA.content“.

Abwärtsgerichtete Werteübertragung zwischen Ebenen: Komponente A der Ebene 1 fügt Nachrichten über provide in untergeordnete Komponenten ein. Komponente C der Ebene 3 empfängt die Nachricht in Komponente A der Ebene 1 über inject: ['messageFromA'] und erhält den Inhaltseigenschaftswert der Nachricht in Komponente A der Ebene 1 über messageFromA.content, wodurch eine abwärtsgerichtete Werteübertragung zwischen Ebenen erreicht wird.

Der Code lautet wie folgt:

// Ebene 1 Komponente A
<Vorlage>
  <div Klasse="compa">
    <h3>Dies ist eine Komponente</h3>
    <input type="text" v-model="nachricht.inhalt" />
    <KompB />
  </div>
</Vorlage>
<Skript>
importiere CompB aus './compB'
Standard exportieren {
  Name: 'CompA',
  bieten() {
    zurückkehren {
      messageFromA: this.message, // die Nachricht über provide an die untergeordnete Komponente weitergeben}
  },
  Daten() {
    zurückkehren {
      Nachricht: {
        Inhalt: '',
      },
    }
  },
  Komponenten:
    KompB,
  },
}
</Skript>

// Ebene 2 Komponente B
<Vorlage>
  <div Klasse="compb">
    <h4>Dies ist die B-Komponente</h4>
    <p>Eine Nachricht von Komponente A erhalten: {{ messageFromA && messageFromA.content }}</p>
    <CompC />
  </div>
</Vorlage>
<Skript>
CompC aus „./compC“ importieren
Standard exportieren {
  Name: 'CompB',
  inject: ['messageFromA'], // Akzeptiere die von provide in A über inject übergebene Nachricht
  Komponenten:
    CompC,
  },
}
</Skript>

// Ebene 3 Komponente C
<Vorlage>
  <div Klasse="compc">
    <h5>Dies ist eine C-Komponente</h5>
    <p>Eine Nachricht von Komponente A erhalten: {{ messageFromA && messageFromA.content }}</p>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Compc',
  inject: ['messageFromA'], // Akzeptiere die von provide in A über inject übergebene Nachricht
}
</Skript>

Notiz:

Einige Studenten möchten mich vielleicht fragen, warum die Nachricht in der Komponente A der ersten Ebene oben den Objekttyp statt des Zeichenfolgentyps verwendet, da die Provide- und Inject-Bindungen in Vue nicht reagieren. Wenn die Nachricht vom Typ „String“ ist, kann sie nach der Änderung des Nachrichtenwerts über das Eingabefeld in der Komponente A der ersten Ebene nicht „messageFromA“ zugewiesen werden. Wenn sie vom Typ „Object“ ist, kann der Attributwert in „messageFromA“ immer noch entsprechend geändert werden, wenn sich der Objektattributwert ändert, und der von der untergeordneten Komponente „inject“ empfangene Objektattributwert kann sich ebenfalls entsprechend ändern.

Wenn ein Nachkomme dasselbe Attribut angibt wie der Vorgänger, überschreibt der Nachkomme den vom Vorgänger angegebenen Wert. Wenn beispielsweise Komponente B der Ebene 2 über provide auch einen messageFromA-Wert in Komponente C der Ebene 3 einspeist, erhält messageFromA in Komponente C der Ebene 3 bevorzugt den von Komponente B der Ebene 2 eingespeisten Wert und nicht den von Komponente A der Ebene 1 eingespeisten.

Effektvorschau

6. Ereignisbus

Einführung

EventBus, auch als Eventbus bekannt, registriert eine neue Vue-Instanz, hört auf Ereignisse dieser Instanz und löst sie aus, indem es $emit und $on dieser Instanz aufruft, und realisiert die globale Kommunikation von Komponenten durch Übergabe von Parametern. Es handelt sich um eine Komponente ohne DOM und sie verfügt nur über Instanzmethoden, ist also sehr leichtgewichtig.

Wir können dies tun, indem wir es bei der globalen Vue-Instanz registrieren:

// Haupt.js
Vue.prototype.$Bus = neues Vue()

Wenn das Projekt jedoch zu groß ist, sollten wir den Ereignisbus besser in eine einzelne Datei abstrahieren und ihn in jede Komponentendatei importieren, die verwendet werden muss. Auf diese Weise wird der globale Namespace nicht verunreinigt:

// bus.js, importiere es über import import Vue from 'vue'
exportiere const Bus = neues Vue()

Prinzipanalyse

Das Prinzip von eventBus ist eigentlich ganz einfach: Es verwendet den Abonnement-Veröffentlichungsmodus und implementiert die beiden Methoden $emit und $on:

// eventBus-Prinzip exportiere Standardklasse Bus {
  Konstruktor() {
    diese.callbacks = {}
  }
  $on(Ereignis, Funktion) {
    dies.callbacks[Ereignis] = dies.callbacks[Ereignis] || []
    dies.callbacks[Ereignis].push(fn)
  }
  $emit(Ereignis, Argumente) {
    dies.callbacks[event].forEach((fn) => {
      fn(Argumente)
    })
  }
}

// Importieren Sie Folgendes in main.js // Vue.prototype.$bus = new Bus()

Codebeispiel

In diesem Beispiel gibt es insgesamt 4 Komponenten: [A [B [C, D]]], Ebene 1 Komponente A, Ebene 2 Komponente B, Ebene 3 Komponente C und Ebene 3 Komponente D. Dies haben wir durch die Verwendung von eventBus erreicht:

Globale Kommunikation: Dazu gehört die Kommunikation zwischen übergeordneten und untergeordneten Komponenten, die Kommunikation zwischen Geschwisterkomponenten und die Kommunikation zwischen ebenenübergreifenden Komponenten. Die Betriebslogik der vier Komponenten ist dieselbe. Bei der Eingabe in das Eingabefeld wird der Rückruf des sendMessage-Ereignisses über this.$bus.$emit('sendMessage', obj) ausgelöst, und Absender und Nachricht werden in Objekte gekapselt und als Parameter übergeben; gleichzeitig werden die sendMessage-Ereignisse anderer Komponenten über this.$bus.$on('sendMessage', obj) abgehört, und die Werte von Absender und Nachricht der aktuellen Komponente werden instanziiert. Auf diese Weise können, wenn sich der Wert eines Komponenteneingabefelds ändert, andere Komponenten die entsprechenden Informationen empfangen und eine globale Kommunikation erreichen.

Der Code lautet wie folgt:

// Haupt.js
Vue.prototype.$bus = neues Vue()

// Ebene 1 Komponente A
<Vorlage>  
  <div Klasse="ContainerA">   
    <h2>das ist CompA</h2>  
    <input type="text" v-model="nachricht" @keyup="sendeNachricht" />   
    <p v-show="messageFromBus && sender !== $options.name">      
      Empfangene Nachricht von {{ sender }}: {{ messageFromBus }}   
    </p>   
    <KompB /> 
  </div>
</Vorlage>
<Skript>
importiere CompB aus './compB'
Standard exportieren {  
  Name: 'CompA', 
  Komponenten:   
    KompB,  
  },  
  Daten() {  
    zurückkehren {    
      Nachricht: '',    
      Nachricht vom Bus: '',      
      Absender: '',   
    } 
  },  
  montiert() {   
    this.$bus.$on('sendMessage', (obj) => { // Hören Sie das sendMessage-Ereignis über eventBus const { sender, message } = obj    
      this.sender = Absender     
      this.messageFromBus = Nachricht  
    }) 
  }, 
  Methoden: {  
    Nachricht senden() {     
      this.$bus.$emit('sendMessage', { // Löse das sendMessage-Ereignis über den eventBus-Absender aus: this.$options.name,     
        Nachricht: diese.Nachricht,   
      })   
    }, 
  },
}
</Skript>

// Ebene 2 Komponente B
<Vorlage> 
  <div Klasse="ContainerB">   
    <h3>das ist CompB</h3>  
    <input type="text" v-model="nachricht" @keyup="sendeNachricht" />  
    <p v-show="messageFromBus && sender !== $options.name">     
      Empfangene Nachricht von {{ sender }}: {{ messageFromBus }}  
    </p>  
    <CompC />  
    <KompD /> 
  </div>
</Vorlage>
<Skript>
CompC aus „./compC“ importieren
CompD aus „./compD“ importieren
Standard exportieren { 
  Name: 'CompB', 
  Komponenten:  
    CompC,  
    KompD,  
  }, 
  Daten() {  
    zurückkehren {    
      Nachricht: '',   
      Nachricht vom Bus: '',    
      Absender: '',   
    } 
  }, 
  montiert() {    
    this.$bus.$on('sendMessage', (obj) => { // Hören Sie das sendMessage-Ereignis über eventBus const { sender, message } = obj     
      this.sender = Absender     
      this.messageFromBus = Nachricht  
    }) 
  }, 
  Methoden: {  
    Nachricht senden() {   
      this.$bus.$emit('sendMessage', { // Löse das sendMessage-Ereignis über den eventBus-Absender aus: this.$options.name,    
        Nachricht: diese.Nachricht,    
     })   
   },  
 },
}
</Skript>

// Ebene 3 Komponente C
<Vorlage> 
  <div Klasse="ContainerC">  
    <p>das ist CompC</p>   
    <input type="text" v-model="nachricht" @keyup="sendeNachricht" />   
    <p v-show="messageFromBus && sender !== $options.name">      
      Empfangene Nachricht von {{ sender }}: {{ messageFromBus }}  
    </p> 
  </div>
</Vorlage>
<Skript>
Standard exportieren {  
  Name: 'CompC',
  Daten() {   
    zurückkehren {   
      Nachricht: '',   
      Nachricht vom Bus: '',   
      Absender: '',   
    } 
  }, 
  montiert() {  
    this.$bus.$on('sendMessage', (obj) => { // Hören Sie das sendMessage-Ereignis über eventBus const { sender, message } = obj    
      this.sender = Absender    
      this.messageFromBus = Nachricht   
    })  
  },
  Methoden: {   
    Nachricht senden() {    
      this.$bus.$emit('sendMessage', { // Löse das sendMessage-Ereignis über den eventBus-Absender aus: this.$options.name,     
        Nachricht: diese.Nachricht,     
      })   
    }, 
  },
}
</Skript>

// Ebene 3 Komponente D
<Vorlage> 
  <div Klasse="ContainerD">   
    <p>das ist CompD</p>   
    <input type="text" v-model="nachricht" @keyup="sendeNachricht" />   
    <p v-show="messageFromBus && sender !== $options.name">     
      Empfangene Nachricht von {{ sender }}: {{ messageFromBus }} 
    </p> 
  </div>
</Vorlage>
<Skript>
Standard exportieren { 
  Name: 'CompD', 
  Daten() {  
    zurückkehren {   
      Nachricht: '',   
      Nachricht vom Bus: '',   
      Absender: '',   
    } 
  }, 
  montiert() {   
    this.$bus.$on('sendMessage', (obj) => { // Hören Sie das sendMessage-Ereignis über eventBus const { sender, message } = obj    
      this.sender = Absender   
      this.messageFromBus = Nachricht   
    }) 
  }, 
  Methoden: {  
    Nachricht senden() {   
      this.$bus.$emit('sendMessage', { // Löse das sendMessage-Ereignis über den eventBus-Absender aus: this.$options.name,     
        Nachricht: diese.Nachricht,   
      })  
    }, 
  },
}
</Skript>

Effektvorschau

Das Bild ist zu groß, bitte machen Sie einen Screenshot

7. Vuex

Wenn ein Projekt groß wird und mehrere Personen dasselbe Projekt betreuen und für die globale Kommunikation ein Ereignisbus verwendet wird, können Änderungen bei globalen Variablen schwer vorherzusagen sein. So wurde Vuex geboren.

Vuex ist ein speziell für Vue.js-Anwendungen entwickeltes Zustandsverwaltungsmuster. Es verwaltet den Status aller Komponenten einer Anwendung über einen zentralen Speicher und sorgt durch entsprechende Regeln für vorhersehbare Statusänderungen.

Weitere Informationen zu Vuex finden Sie in der offiziellen Vuex-Dokumentation [1]. Ich werde hier nicht im Detail darauf eingehen, sondern nur einen Blick auf den Code werfen.

Codebeispiel

Die Vuex-Instanz und der Ereignisbus leisi enthalten ebenfalls 4 Komponenten: [A [B [C, D]]], Ebene 1 Komponente A, Ebene 2 Komponente B, Ebene 3 Komponente C und Ebene 3 Komponente D. In diesem Beispiel haben wir Folgendes implementiert:

Globale Kommunikation: Der Codeinhalt ähnelt dem von eventBus, ist jedoch viel einfacher zu verwenden als eventBus. Jede Komponente überwacht die Änderungen des Eingabefelds über die Uhr und löst über das Commit von Vuex Mutationen aus, um den Wert von Stroe zu ändern. Anschließend erhält jede Komponente dynamisch und rechnergestützt Daten aus dem Speicher, wodurch eine globale Kommunikation erreicht wird.

//store.js
Vue von „vue“ importieren
Vuex von „vuex“ importieren
Vue.Verwenden(Vuex)
exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    Nachricht: {
      Absender: '',
      Inhalt: '',
    },
  },
  Mutationen:
    sendMessage(state, obj) {
      Statusnachricht = {
        Absender: obj.sender,
        Inhalt: obj.content,
      }
    },
  },
})

// Komponente A
<Vorlage>
  <div Klasse="ContainerA">
    <h2>das ist CompA</h2>
    <input Typ="Text" v-Modell="Nachricht" />
    <p v-show="messageFromStore && sender !== $options.name">
      Empfangene Nachricht von {{ sender }}: {{ messageFromStore }}
    </p>
    <KompB />
  </div>
</Vorlage>
<Skript>
importiere CompB aus './compB'
Standard exportieren {
  Name: 'CompA',
  Komponenten:
    KompB,
  },
  Daten() {
    zurückkehren {
      Nachricht: '',
    }
  },
  berechnet: {
    Nachricht aus dem Store () {
      gib dies zurück.$store.state.message.content
    },
    sender() {
      gib dies zurück.$store.state.message.sender
    },
  },
  betrachten:
    Nachricht(neuerWert) {
      dies.$store.commit('sendMessage', {
        Absender: this.$options.name,
        Inhalt: neuerWert,
      })
    },
  },
}
</Skript>

Genau wie in eventBus sind die Codes in den Komponenten B, C und D bis auf den Unterschied bei der Einführung von Unterkomponenten gleich, daher werde ich nicht ins Detail gehen.

Effektvorschau

Zusammenfassen

Insgesamt wurden oben 7 Kommunikationsmethoden für Vue-Komponenten erwähnt. Die Arten der Kommunikation, die sie durchführen können, sind in der folgenden Abbildung dargestellt:

• props/$emit: Ermöglicht die bidirektionale Kommunikation zwischen übergeordneten und untergeordneten Komponenten. Dies ist im Allgemeinen unsere am häufigsten verwendete Wahl bei der täglichen Kommunikation zwischen übergeordneten und untergeordneten Komponenten.
• v-slot: Kann eine Einwegkommunikation zwischen übergeordneten und untergeordneten Komponenten realisieren (übergeordnete Komponente übergibt Wert an untergeordnete Komponente). Bei der Implementierung wiederverwendbarer Komponenten, der Übergabe von DOM-Knoten, HTML und anderen Inhalten an Komponenten und der sekundären Verarbeitung von Tabellenwerten in einigen Komponentenbibliotheken kann v-slot Priorität eingeräumt werden.
• $refs/$parent/$children/$root: kann eine bidirektionale Kommunikation zwischen übergeordneten und untergeordneten Komponenten realisieren, wobei $root eine unidirektionale Wertübertragung von der Instanz der Stammkomponente zu den untergeordneten Komponenten über alle Ebenen hinweg realisieren kann. Wenn die übergeordnete Komponente keinen Wert übergibt oder über die V-On-Bindung lauscht, können die übergeordneten und untergeordneten Komponenten die Verwendung dieser APIs in Betracht ziehen, wenn sie die Eigenschaften oder Methoden der jeweils anderen Komponente abrufen möchten.
• $attrs/$listeners: Ermöglicht eine bidirektionale Kommunikation zwischen mehreren Ebenen. So können Sie eingehende Attribute und gebundene Listener problemlos abrufen und bequem an Unterkomponenten auf niedrigerer Ebene weitergeben. Dies ist beim Erstellen erweiterter Komponenten sehr nützlich.
• Bereitstellen/einfügen: Es kann eine ebenenübergreifende Einwegkommunikation realisieren und Abhängigkeiten leicht in abgeleitete Komponenten einfügen. Dies ist Ihre beste Wahl, wenn Sie erweiterte Komponenten implementieren und Komponentenbibliotheken erstellen.
• eventBus: kann globale Kommunikation realisieren. Wenn der Projektumfang nicht groß ist, kann eventBus verwendet werden, um eine globale Ereignisüberwachung zu realisieren. Allerdings sollte eventBus mit Vorsicht verwendet werden, um globale Verschmutzung und Speicherlecks zu vermeiden.
• Vuex: Es ermöglicht eine globale Kommunikation und ist die Best Practice für die globale Statusverwaltung von Vue-Projekten. Wenn das Projekt groß ist und Sie den globalen Komponentenstatus zentral verwalten möchten, ist die Installation von Vuex die richtige Wahl!

Das Obige ist der detaillierte Inhalt eines vertieften Verständnisses der sieben Kommunikationsmethoden von Vue-Komponenten. Weitere Informationen zu Kommunikationsmethoden von Vue-Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!