Wie implementiert Vue die Kommunikation zwischen Komponenten?

1. Kommunikation zwischen Vater und Sohn

Die häufigste Kommunikation findet zwischen Vater und Sohn statt und besteht aus einer bidirektionalen Datenübertragung.

1.1 Übergeordnete Komponente --> Untergeordnete Komponente

Die Art und Weise, wie eine übergeordnete Komponente Daten an ihre untergeordnete Komponente weitergibt, besteht darin, dass die Daten über Prop an die untergeordnete Komponente weitergegeben werden.

//Kind.vue
<Vorlage>
    <div>
        Ich bin der Sohn und habe die Daten von meinem Vater als {{value}} erhalten.
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Requisiten:{
        Wert: Zeichenfolge
    }
}

//App.vue
<Vorlage>
  <div id="app">
    <Kind :Wert="x" />
  </div>
</Vorlage>

<Skript>
Importiere Child aus './components/Child'
Standard exportieren {
  Daten(){
    zurückkehren {
      x: 'hallo, Kind'
    }
  },
  Komponenten: {
    Kind
  }
}
</Skript>

1.2 Sohnkomponente --> Elternkomponente

Die untergeordnete Komponente übergibt Daten an die übergeordnete Komponente, indem sie über $emit in der untergeordneten Komponente ein benutzerdefiniertes Ereignis auslöst. Wenn die untergeordnete Komponente verwendet wird, muss v-on auf das benutzerdefinierte Ereignis warten.

Die v-on-Ereigniskommunikation wird hier automatisch als Ereignisattribut der Unterkomponente abgehört, wenn sie von der Unterkomponente verwendet wird.

Daher übergibt die untergeordnete Komponente Daten an die übergeordnete Komponente, abhängig von den benutzerdefinierten Ereignisattributen, die von der untergeordneten Komponente verwendet werden.

//Kind.vue
<Vorlage>
    <div>
        Ich bin der Sohn und habe die Daten von meinem Vater als {{value}} erhalten.
        <button @click="sagHallo">
            Begrüßen Sie die übergeordnete Komponente</button>
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Requisiten:{
        Wert: Zeichenfolge
    },
    Methoden:{
        sagHallo(){
            dies.$emit('sagHallo','hallo,Elternteil!');
        }
    }
}
</Skript>

//App.vue
<Vorlage>
  <div id="app">
    Ich bin die übergeordnete Komponente und die Daten, die ich von der untergeordneten Komponente erhalte, sind {{y}}
    <Kind :Wert="x" @sayHi="y = $Ereignis"/>
  </div>
</Vorlage>

<Skript>
Importiere Child aus './components/Child'
Standard exportieren {
  Daten(){
    zurückkehren {
      x: 'hallo, Kind',
      y: ''
    }
  },
  Komponenten: {
    Kind
  }
}
</Skript>

2. Kommunikation zwischen Großvater und Enkel

Für die Kommunikation zwischen Großvater und Enkel können zwei Voice-on-Kommunikationen verwendet werden: Großvater-Vater-Kommunikation und dann Vater-Sohn-Kommunikation.

Sie können auch eine der folgenden Methoden zur Kommunikation zwischen Komponenten verwenden.

3. Kommunikation zwischen beliebigen Komponenten

Bei der Kommunikation beliebiger Komponenten wird nicht mehr unterschieden, ob A mit B oder B mit A kommuniziert. Vielmehr erfolgt die Kommunikation universell. Wer Daten senden möchte, nutzt die entsprechende API zum Senden von Daten, und wer Daten empfangen möchte, nutzt die entsprechende API zum Empfangen von Daten.

Es gibt zwei Möglichkeiten, zwischen Komponenten zu kommunizieren. Eine besteht darin, die EventBus-Kommunikation im Publish-Subscribe-Modus zu verwenden, und die andere ist die Verwendung der Vuex-Kommunikation.

3.1 Ereignisbus

EventBus bedeutet wörtlich Ereignisbus. Alle durch ausgelöste Ereignisse übertragenen Daten werden von der Vordertür auf dem Bus gespeichert, und dann können die entsprechenden Ereignisdaten den Bus verlassen, indem sie auf den vom entsprechenden Ereignis bereitgestellten Ausgang hören.

EventBus bedeutet eigentlich den Veröffentlichungs- und Abonnementmodus, d. h., wer Daten weitergeben möchte, muss die Daten über die API veröffentlichen, die das benutzerdefinierte Ereignis auslöst; wer die Dateninformationen empfangen muss, muss die Daten über die Ereignisüberwachungs-API überwachen. Sobald erkannt wird, dass die überwachten Daten veröffentlicht werden sollen, werden sie empfangen. Dies ist ein Datenabonnement.

Das Wichtigste bei der EventBus-Kommunikation ist, die Veröffentlichungs- und Abonnement-APIs zu verstehen. In Vue stellt die Vue-Instanz zwei Schnittstellen bereit, $emit und $on , sodass Sie eine neue leere Vue-Instanz erstellen können, um diese beiden Schnittstellen zu erhalten.

const eventBus = neuer Vue();
eventBus.$emit(eventName, […args]) //Event veröffentlichen eventBus.$on(event, callback) //Event abonnieren

Nachfolgend sind einige Beispiele aufgeführt:

// eventBus.js
Vue von „vue“ importieren
exportiere const eventBus = neues Vue();

//Kind
<Vorlage>
    <div>
        Ich bin der Sohn und habe die Daten von meinem Vater als <strong>{{value}}</strong> erhalten.
        <button @click="sagHallo">
            Begrüßen Sie die übergeordnete Komponente</button>
        <button @click="Geschwister">
            Begrüßen Sie Geschwisterkomponenten</button>
    </div>
</Vorlage>

<Skript>
importiere {eventBus} aus '../eventBus.js'
Standard exportieren {
    Requisiten:{
        Wert: Zeichenfolge
    },
    Methoden:{
        sagHallo(){
            dies.$emit('sagHallo','hallo,Elternteil!');
        },
        Geschwister(){
            eventBus.$emit('Geschwister','hallo, Bruder');
        }
    }
}
</Skript>

<Stilbereich>
    stark{
        Farbe: rot;
    }
</Stil>

//Geschwister
<Vorlage>
    <div>
        Ich bin eine Bruderkomponente und die Dateninformationen, die ich von der Sohnkomponente erhalte, sind <strong>{{x}}</strong> 
    </div>
</Vorlage>

<Skript>
importiere {eventBus} aus '../eventBus.js'
Standard exportieren {
    Daten(){
        zurückkehren {
            X: ''
        }
    },
    montiert(){
        eventBus.$on('Geschwister', (msg)=>{
            dies.x = Nachricht;
        })
    }
}
</Skript>

<Stilbereich>
    stark{
            Farbe: grün;
    }
</Stil>

//Elternteil
<Vorlage>
  <div id="app">
    Ich bin die übergeordnete Komponente und die Daten, die ich von der untergeordneten Komponente erhalte, sind <strong>{{y}}</strong>
    <Kind :Wert="x" @sayHi="y = $Ereignis"/>
    <Geschwister></Geschwister>
  </div>
</Vorlage>

<Skript>
Importiere Child aus './components/Child'
Geschwister aus „./components/Sibling“ importieren
Standard exportieren {
  Daten(){
    zurückkehren {
      x: 'hallo, Kind',
      y: ''
    }
  },
  Komponenten: {
    Kind,
    Geschwister
  }
}
</Skript>

<Stilbereich>
    stark{
            Farbe: blau;
    }
</Stil>

In Bezug auf EventBus stellt sich möglicherweise eine Frage: Da es in der Vue-Instanz $emit und $on gibt, warum wird dann nicht einfach this.$emit zum Auslösen von Ereignissen und this.$on zum Empfangen von Ereignissen verwendet? Sie müssen außerdem über eine zusätzliche leere Instanz eventBus = new Vue() verfügen. Das liegt daran, dass jede Komponente in Vue eine separate Vue-Instanz ist. Wenn Sie das Emittierungsereignis dieser Instanz in dieser Vue-Instanz auslösen, kann das On-Ereignis einer anderen Instanz nicht empfangen werden. Wie kann eine Ereigniskommunikation durchgeführt werden, wenn Sie sich nicht im selben Bus befinden? Hierzu ist ein öffentlicher Bus, der Veranstaltungsbus, notwendig.

Die Verwendung von eventBus im obigen Beispiel ist ein lokaler eventBus. Jeder, der eventBus verwenden möchte, muss ihn manuell einführen. Sie können eventBus auch global machen, indem Sie es beispielsweise an den Prototyp von Vue hängen.

//main.js
Vue von „vue“ importieren
App aus „./App.vue“ importieren

Vue.config.productionTip = falsch

Vue.prototype.$eventBus = new Vue(); //Fügen Sie diesen Satz hinzu, er muss vor dem neuen Vue unten stehen.

neuer Vue({
  rendern: h => h(App),
}).$mount('#app')

//Kind
Geschwister(){
    this.$eventBus.$emit('Geschwister','hallo, Bruder');
}

//Geschwister
montiert(){
    dies.$eventBus.$on('Geschwister', (msg)=>{
        dies.x = Nachricht;
    })
}

Zusätzlich zur oben beschriebenen Methode zum Hinzufügen von Eigenschaften zum Vue-Prototyp können Sie auch Object.defineProperty() verwenden, um dem Vue-Prototyp Eigenschaften hinzuzufügen.

Vue von „vue“ importieren
App aus „./App.vue“ importieren

Vue.config.productionTip = falsch

let eventBus = neues Vue()
Objekt.defineProperty(Vue.prototype,'$eventBus',{
  erhalten(){
    Ereignisbus zurückgeben
  }
})

neuer Vue({
  rendern: h => h(App),
}).$mount('#app')

3.2 Vuex

Für die Kommunikation zwischen Vue-Komponenten kann auch ein speziell für Vue.js-Anwendungen entwickelter Statusverwaltungsmodus verwendet werden: Vuex. Die Verwendung von Vuex ist relativ kompliziert, Einzelheiten finden Sie im Vuex-Blog. Vuex eignet sich für die Statusverwaltung großer und komplexer Vue-Projekte. Für einige kleine und mittelgroße Anwendungen können Sie den Store-Modus gemäß dem Vuex-Prinzip für die Statusverwaltung anpassen. Einzelheiten zur benutzerdefinierten Statusverwaltung von Vue finden Sie im Blog „Vue Simple State Management – ​​Store Mode“.

Unabhängig davon, ob es sich um den Vuex- oder den benutzerdefinierten Store-Modus handelt, wird das Prinzip der Kommunikation zwischen Komponenten durch die gemeinsame Nutzung von Daten erreicht. Komponenten verwenden dieselbe Datenquelle. Wenn eine Komponente ihre Daten ändert, ändert sich auch die Datenquelle, von der eine andere Komponente abhängt.

Oben sind die Details, wie Vue die Kommunikation zwischen Komponenten implementiert. Weitere Informationen zur Kommunikation zwischen Vue-Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!