Detaillierte Analyse mehrerer Positionen in der Komponentenkommunikation von Vue.js

Was sind Vue-Komponenten?

Component ist eine der leistungsstärksten Funktionen von Vue.js. Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. Auf einer hohen Ebene ist eine Komponente ein benutzerdefiniertes Element, dem der Compiler von Vue.js spezielle Funktionen hinzufügt. Teilweise können Komponenten auch in Form nativer HTML-Elemente vorliegen, erweitert um das Attribut is.

Kommunikation zwischen Vue-Komponenten

Übergeordnete Komponente kommuniziert mit untergeordneter Komponente

Methode 1: Requisiten

Mithilfe von Requisiten kann die übergeordnete Komponente mithilfe von Requisiten Daten an die untergeordnete Komponente übergeben.

Vue-Vorlage für die übergeordnete Komponente Father.vue

<template>
  <child :msg="message"></child>
</template>
<script>
import child from &#39;./child.vue&#39;;
export default {
  components: {
    child
  },
  data () {
    return {
      message: &#39;father message&#39;;
    }
  }
}
</script>

Vue-Vorlage für die untergeordnete Komponente child.vue

<template>
  <p>{{msg}}</p>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>

Methode 2: Verwenden Sie $children

Verwenden Sie $children, um auf untergeordnete Komponenten in der übergeordneten Komponente zuzugreifen.

Die untergeordnete Komponente kommuniziert mit der übergeordneten Komponente

Methode 1: Vue-Ereignisse verwenden

Die übergeordnete Komponente übergibt die Ereignismethode an die untergeordnete Komponente, und die untergeordnete Komponente löst das Ereignis über $emit aus und ruft die übergeordnete Komponente zurück.

Vue-Vorlage für die übergeordnete Komponente Father.vue

<template>
  <child @msgFunc="func"></child>
</template>
<script>
import child from &#39;./child.vue&#39;;
export default {
  components: {
    child
  },
  methods: {
    func (msg) {
      console.log(msg);
    }
  }
}
</script>

Vue-Vorlage für die untergeordnete Komponente child.vue

<template>
  <button @click="handleClick">点我</button>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  methods () {
    handleClick () {
      //........
      this.$emit(&#39;msgFunc&#39;);
    }
  }
}
</script>

Methode 2: Ändern Sie die Daten der übergeordneten Komponente, indem Sie die von der übergeordneten Komponente übergebenen Requisiten ändern.

Diese Methode kann nur einen Verweis auf die übergeben übergeordnete Komponente Es kann bei der Verwendung von Variablen verwendet werden, Literalvariablen können jedoch nicht den entsprechenden Effekt erzielen. Da die Trinkvariable letztendlich auf dieselbe Speicheradresse verweist, unabhängig davon, ob es sich um die Daten in der übergeordneten Komponente oder um die Daten in den von der untergeordneten Komponente erhaltenen Requisiten handelt, werden durch Ändern der Daten in den Requisiten in der untergeordneten Komponente auch die Daten in der übergeordneten Komponente geändert Komponente.

Es wird jedoch nicht empfohlen, den Wert von Requisiten direkt zu ändern. Wenn die Daten zur Anzeige von Änderungen verwendet werden, füge ich sie häufig in Daten ein und gebe sie zurück Bei Bedarf verwendet die übergeordnete Komponente dann Ereignisse, um Daten zurückzugeben. Dadurch bleiben die Komponenten unabhängig und entkoppelt und es kommt nicht zu einer abnormalen Datenflussverwirrung aufgrund der Verwendung derselben Daten. Daten werden nur über bestimmte Schnittstellen übertragen, um die Daten zu ändern, und der interne Datenstatus wird durch spezielle Daten verwaltet.

Methode 3: Verwenden Sie $parent

Verwenden Sie $parent, um auf die Daten der übergeordneten Komponente zuzugreifen.

Datenübertragung zwischen Nicht-Eltern-Kind-Komponenten und Geschwisterkomponenten

Für die Kommunikation von Nicht-Eltern-Kind-Komponenten empfiehlt Vue offiziell die Verwendung einer Vue-Instanz als zentralen Ereignisbus.

Vue verfügt über einen internen Ereignismechanismus, Sie können auf den Quellcode verweisen.

Die $on-Methode wird verwendet, um auf ein Ereignis zu warten.

$emit wird verwendet, um ein Ereignis auszulösen.

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on('eventName', (val) => {
  //......do something
});
/*触发事件*/
event.$emit('eventName', 'this is a message.');

Mehrstufige Eltern-Kind-Komponentenkommunikation:

In Vue1.0 sind zwei Methoden, $broadcast und $dispatch, implementiert Kommunikation mit untergeordneten Komponenten (oder übergeordneten Komponenten) sendet (oder sendet) Wenn die untergeordnete Komponente (oder übergeordnete Komponente) auf das Ereignis wartet und „true“ zurückgibt, sendet sie das Ereignis weiterhin an die Komponente auf Enkelebene . Diese Methode wurde jedoch in Vue2.0 entfernt.

Als ich das Open-Source-Komponentenbibliothekselement von Ele.me studierte, stellte ich fest, dass sie die Broadcast- und Dispatch-Methoden neu implementiert und in Form von Mixin eingeführt haben. Weitere Informationen finden Sie unter „Talk über die Übertragung und den Versand von Elementkomponentenbibliotheken". Es unterscheidet sich jedoch geringfügig von den beiden Methodenimplementierungen von Vue1.0. Diese beiden Methoden implementieren die Funktionen der Ereignisübertragung an untergeordnete Komponenten und der Ereignisverteilung an übergeordnete Komponenten mit mehreren Ebenen. Es handelt sich jedoch nicht um eine Ereignisübertragung im weiteren Sinne. Es muss ein Kommentarname angegeben werden, um Ereignisse an die Komponente mit dem angegebenen Komponentennamen zu senden (senden).

Tatsächlich verwendet die interne Implementierung dieser beiden Methoden immer noch $parent und $children, die zum schrittweisen Durchlaufen untergeordneter Knoten oder zum Abfragen übergeordneter Knoten verwendet werden. Wenn auf den angegebenen Komponentennamen zugegriffen wird, lautet $emit Wird aufgerufen, um das Specify-Ereignis auszulösen.

Komplexe einseitige Anwendungsdatenverwaltung

Wenn die Anwendung komplex genug ist, verwenden Sie bitte vuex für die Datenverwaltung.

Zusammenfassung

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse mehrerer Positionen in der Komponentenkommunikation von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!