Methoden zur Kommunikation zwischen Vue-Geschwisterkomponenten

In Projekten stoßen wir häufig auf Situationen, in denen Geschwisterkomponenten kommunizieren. In großen Projekten können wir Kommunikationsprobleme zwischen Komponenten durch die Einführung von Vuex leicht bewältigen, in einigen kleinen Projekten ist die Einführung von Vuex jedoch nicht erforderlich. Im Folgenden finden Sie eine kurze Einführung in die Methode zur Verwendung traditioneller Methoden zur Erzielung der Kommunikation zwischen übergeordneten und untergeordneten Komponenten. In diesem Artikel wird hauptsächlich die Kommunikationsmethode der Vue-Bruder-Komponenten vorgestellt (ohne Vuex zu verwenden). Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz angeben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Einfaches Beispiel: Wir klicken auf den Button in Komponente a und übergeben die Informationen an Komponente b, sodass Komponente b auftaucht.

Die Grundidee ist: Zuerst vom Sohn zum Vater übergehen, dann vom Vater zum Sohn

Zuerst im Als.vue-Komponente binden wir ein handleClick-Ereignis an den Button-Button. In diesem Fall verwenden wir die Methode this.$emit(), um ein benutzerdefiniertes Ereignis auszulösen und unsere Parameter zu übergeben.

Im Beispiel verwenden wir this.$emit(), um das benutzerdefinierte Ereignis der isLogFn-Methode auszulösen und den Protokollparameter zu übergeben

a.vue

<template>
 <p class="ap">
 <p>a组件</p>
 <button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
 </p>
</template>

<script>

export default {
 methods: {
 handleClick () {
  this.$emit(&#39;isLogFn&#39;,&#39;log&#39;)
 }
 }
}
</script>

<style>
.ap{
 width: 400px;
 height: 200px;
 border: 1px solid #000;
 margin: 0 auto;
}
</style>

Der zweite Schritt besteht darin, dieses benutzerdefinierte Ereignis in der übergeordneten Komponente abzuhören, die entsprechende Methode auszulösen und die von der Komponente übergebenen Parameter zu akzeptieren. An diesem Punkt haben wir den Prozess der Werteübergabe von der untergeordneten Komponente an die übergeordnete Komponente abgeschlossen.

Im Beispiel hört auf isLogFn, um die Methode lisLogFn auszulösen, die wir in der übergeordneten Komponente definiert haben, und ruft die übergebenen „Protokoll“-Daten ab. Schließen Sie die Wertübertragung vom Sohn zum Vater ab.

Zu diesem Zeitpunkt ist der gesamte Prozess noch nicht abgeschlossen, er ist erst zur Hälfte erledigt. Als nächstes müssen wir die Wertübertragung zwischen der übergeordneten und der untergeordneten Komponente abschließen und die Informationen von Komponente a an Komponente b übergeben.

Binden Sie das islog-Attribut im -Tag und binden Sie das Anmeldefeld dynamisch über die lisLogFn-Methode ein Bestimmen Sie das Ergebnis, um die Daten in data() zu ändern, und übergeben Sie dabei die Daten an die b-Komponente

App.vue

<template>
 <p id="app">
 <aPage @isLogFn = "lisLogFn"></aPage>
 <bPage :isLog = "login"></bPage>
 </p>
</template>

<script>

import aPage from &#39;./components/a.vue&#39;
import bPage from &#39;./components/b.vue&#39;

export default {
 data () {
 return {
  login: &#39;false&#39;
 }
 },
 name: &#39;app&#39;,
 components: {
 aPage,
 bPage
 },
 methods: {
 lisLogFn (data) {
  if (data == &#39;log&#39;) {
  this.login = &#39;true&#39;
  }
 }
 }
}
</script>

<style>
</style>

Schließlich in Die b-Komponente Sie müssen Requisiten erstellen und ein isLog-Attribut definieren. Dieses Attribut ist der Wert, den wir übergeben haben. Anschließend verarbeiten wir diese Daten in einer berechneten Eigenschaft, die letztendlich von der b-Komponente verwendet wird. Im Beispiel verwenden wir v-show="isLogin", um zu steuern, ob das Popup-Fenster geöffnet wird.

Denken Sie daran! Diese Requisiten können nicht direkt verwendet werden, sondern müssen durch Computerverarbeitung verarbeitet werden. Der Grund dafür ist, dass ich die offizielle Vue-Beschreibung

Einseitiger Datenfluss

b.vue

<template>
 <p class="bp" v-show="isLogin">我是组件B弹窗</p>
</template>

<script>
export default {
 props: [&#39;isLog&#39;],
 data () {
 return {

 }
 },
 computed: {
 isLogin () {
  if(this.isLog == &#39;true&#39;){
  return true
  } else {
  return false
  }
 }
 }
}
</script>

<style>
 .bp{
 width: 200px;
 height: 200px;
 border: 1px #000 solid;
 margin: 0 auto;
 }

</style>

Zusammenfassung: Wenn Sie einen Werttransfer zwischen Geschwisterkomponenten implementieren möchten, müssen Sie zunächst mit Eltern und Kind sowie dem Werttransfer zwischen Vater und Sohn vertraut sein.

Untergeordnetes Elternteil:

1. Die untergeordnete Komponente muss auf irgendeine Weise ein benutzerdefiniertes Ereignis auslösen, beispielsweise eine Klickereignismethode

2. Geben Sie den zu übergebenden Wert als zweiten Parameter von $emit ein, und der Wert wird als tatsächlicher Parameter an die Methode übergeben, die auf das benutzerdefinierte Ereignis reagiert

3. Registrieren Sie sich in der Unterkomponente der übergeordneten Komponente und binden Sie den Listener für das benutzerdefinierte Ereignis an das Unterkomponenten-Tag

Übergeordnetes und untergeordnetes Element:

1. Die Unterkomponente erstellt eine Eigenschaft in Requisiten, die zum Empfangen des von der übergeordneten Komponente übergebenen Werts verwendet wird

2. Fügen Sie das in den Unterkomponenten-Requisiten erstellte Attribut zum Unterkomponenten-Tag hinzu und weisen Sie den Wert zu, der an übergeben werden muss Unterkomponente zum Attribut

Verwandte Empfehlungen:

Detaillierte Erläuterung der Ereignisbus-Nicht-Eltern-Kind-Komponentenkommunikation in Vue

Vue.js-Komponentenkommunikation Detaillierte Analyse mehrerer Haltungen

Ausführliche Diskussion der Vue.js-Komponenten und Komponentenkommunikation

Das obige ist der detaillierte Inhalt vonMethoden zur Kommunikation zwischen Vue-Geschwisterkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!