Beispiel für die gemeinsame Nutzung von Vue.js-Komponentenkommunikation

Da ich mich sehr für Vue.js interessiere und der Technologie-Stack, an dem ich normalerweise arbeite, auch Vue.js ist, habe ich in den letzten Monaten einige Zeit damit verbracht, den Vue.js-Quellcode zu studieren und eine Zusammenfassung und Ausgabe zu erstellen . Komponenten sind eine der leistungsstärksten Funktionen von Vue.js. Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. In diesem Artikel werden verschiedene Haltungen zur Kommunikation mit Vue.js-Komponenten vorgestellt. Interessierte Freunde sollten einen Blick darauf werfen.

Vorab geschrieben

Es kann zu Abweichungen im Verständnis kommen. Gerne können Sie ein Problem ansprechen und darauf hinweisen, um gemeinsam zu lernen und Fortschritte zu machen.

Was sind Vue-Komponenten?

Komponente 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 untergeordneten Komponenten

Methode 1: Requisiten

Verwenden Sie Requisiten, die übergeordnete Komponente kann Requisiten zur Übergabe verwenden die Daten der untergeordneten Komponente.

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

<template>
  <child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  data () {
    return {
      message: 'father message';
    }
  }
}
</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 verwendet $children

verwenden $children kann auf untergeordnete Komponenten innerhalb der übergeordneten Komponente zugreifen.

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 aus Ereignis über $emit und Rückrufe an die übergeordneten Komponenten.

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

<template>
  <child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
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('msgFunc');
    }
  }
}
</script>

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

Diese Methode kann nur verwendet werden, wenn die übergeordnete Komponente eine Referenzvariable übergibt. Literale Variablen können den entsprechenden Effekt nicht 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, um an untergeordnete Komponenten zu senden (oder zu versenden) ( oder übergeordnete Komponenten) ), wenn die untergeordnete Komponente (oder übergeordnete Komponente) auf das Ereignis wartet und „true“ zurückgibt, wird das Ereignis weiterhin an die Komponente auf Enkelebene gesendet (oder gesendet). 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 weitesten Sinne. Es ist die Angabe eines Kommentarnamens erforderlich, 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.

Verwandte Empfehlungen:

Vue-Geschwisterkomponenten-Kommunikationsmethode

Detaillierte Erläuterung der Ereignisbus-Kommunikation zwischen Nicht-Eltern-Kind-Komponenten in Vue

Deep Dive in Vue.js Komponenten und Komponentenkommunikation

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung von Vue.js-Komponentenkommunikation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!