Eine sehr detaillierte Zusammenfassung der Kommunikation zwischen Vue-Komponenten

Vorwort

Die Komponentenkommunikation spielt in unserem täglichen Entwicklungsprozess eine entscheidende Rolle, insbesondere in Vue und React. Dieser Artikel fasst verschiedene Möglichkeiten der Kommunikation zwischen Komponenten in Vue zusammen:

• Requisiten, $emit
• $Eltern, $Kinder
• $attrs, $listeners
• bereitstellen, injizieren
• Veranstaltungsbus
• vuex
• Lokaler Speicher

1. Props, $emit Einweg-Datenfluss

Vater.vue:

<Vorlage>
  <div>
    <div>Ich bin Vater: <input type="button" value="father" /> Die Nummer ist: {{num}}</div>
    <son :num="num" @change="ändern"></son>
  </div>
</Vorlage>

<Skript>
importiere Sohn aus "./son.vue";
Standard exportieren {
  Name: "Vater",
  Komponenten:
    Sohn,
  },
  Daten() {
    zurückkehren {
      Zahl: 1,
    };
  },
  Methoden:{
    ändern(Wert){
      diese.num = val
    }
  }
};
</Skript>

Sohn.vue:

<Vorlage>
  <div>Ich bin ein Sohn: <input type="button" value="son" @click="change"/>Die Nummer ist: {{num}}</div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
  Komponenten: {},
  Requisiten: {
    Zahl: {
      Standard: 0,
    },
  },
  erstellt() {},
  Methoden: {
    ändern(){
      // this.num = 2 props Kommunikation ist ein einseitiger Datenfluss. Das direkte Ändern der von der übergeordneten Komponente übergebenen Nummer führt zu einem Fehler. // Sie können $emit verwenden, um das Änderungsereignis auszulösen. Die übergeordnete Komponente bindet das Änderungsereignis this.$emit('change', 2)
    }
  },
};
</Skript> 

Für das obige Szenario: Das Änderungsereignis der untergeordneten Komponente besteht lediglich darin, einen Wert in der übergeordneten Komponente zu ändern. Es gibt auch mehrere Möglichkeiten, es zu schreiben:

1. Übergeordnete Komponenten binden Ereignisse mithilfe von Pfeilfunktionen an untergeordnete Komponenten

Vater:
<son :num="num" @change="val => num = val"></son>

Sohn:
dies.$emit('ändern', 2)

2.update:num und .sync

Vater:

<son :num.sync="num"></son>

Sohn:

this.$emit('update:num', 2) //update ist eine vorgeschriebene Schreibweise und kann nicht geändert werden

3.v-Modell

Ändern Sie zuerst die Requisiten und gebundenen Ereignisse:

Vater: <son :value="num" @input="val => num = val"></son> Sohn: this.$emit('input', 2) 
Verfügbare V-Modell-Abkürzung: <son v-model="num"></son>

2. $Eltern, $Kinder

$parent und $children können ihre jeweiligen Methoden direkt aufrufen und Daten in übergeordneten und untergeordneten Komponenten ändern.

Direkt in der untergeordneten Komponente: this.$parent.num = 2

In der übergeordneten Komponente ist $children ein Array, daher ist es nicht sehr intuitiv, um welche untergeordnete Komponente es sich handelt. Sie können $refs verwenden, um die untergeordnete Komponente zu bedienen.

Vue empfiehlt diese Kommunikationsmethode offiziell nicht: Verwenden Sie $parent und $children sparsam – ihr Hauptzweck besteht darin, als Notfallmethode für den Zugriff auf Komponenten zu dienen. Es wird empfohlen, Props und Events zu verwenden, um eine Kommunikation zwischen übergeordneten und untergeordneten Komponenten zu erreichen.

3. $attrs, $listeners

$attrs kann die von der übergeordneten Komponente übergebenen Attribute abrufen:

<div>Ich bin ein Sohn: <input type="button" value="son" @click="change"/>Die Nummer ist: {{$attrs}}</div> 

Dom-Knoten:

$attrs fügt die übergebenen Attribute direkt den entsprechenden Tags hinzu, Props hingegen nicht. Wenn Sie diese Attribute aus dem Tag entfernen möchten, können Sie inheritAttrs verwenden:

Es ist erwähnenswert, dass Props eine höhere Priorität als $attrs haben, das heißt, wenn Props vorhanden sind, ist $attrs ein leeres Objekt:

$attrs wird häufig verwendet, um Attribute über mehrere Komponentenebenen hinweg zu übergeben, z. B. über übergeordnete Komponenten, wobei die übergeordnete Komponente als Transit verwendet wird:

Vater:

<son v-bind="$attrs"></son>

$attrs wird für die ebenenübergreifende Attributübertragung verwendet, während $listeners für die ebenenübergreifende Methodenübertragung verwendet wird.

Großvater.vue:

<Vorlage>
  <div>
    <div>Ich bin Großvater: Die Nummer ist: {{nums}}</div>
    <Vater :nums="nums" @up="nach oben" @down="nach unten"></Vater>
  </div>
</Vorlage>

<Skript>
importiere Vater aus "./father.vue";
Standard exportieren {
  Name: "App",
  Komponenten:
    Vater,
  },
  Daten(){
    zurückkehren {
      Zahlen: 0
    }
  },
  Methoden: {
    hoch() {
      Alarm('oben')
    }, runter() { Alarm('runter') },
  },
};
</Skript>

Vater.vue:

<son v-bind="$attrs" v-on="$listeners"></son>

Sohn.vue:

<div>Ich bin ein Sohn: <input type="button" value="son" @click="$listeners.up"/></div> 

4. bereitstellen, injizieren

Dieses Optionspaar 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 um immer wirksam zu sein, solange die Upstream- und Downstream-Beziehungen hergestellt sind.

Die Bereitstellungsoption sollte ein Objekt oder eine Funktion sein, die ein Objekt zurückgibt.

Die Injektionsoption sollte ein Array von Zeichenfolgen oder ein Objekt sein.

App:

...

Standard exportieren {
  bieten(){
    Rückkehr {vm: dies}
  },

...

Sohn:

...

Standard exportieren {
  einfügen: ['vm'], data(){}, mounted(){ console.log(this.vm) }

... 

Hinweis: Provide- und Inject-Bindungen sind nicht reaktiv. Das war Absicht. Wenn Sie jedoch ein abhörbares Objekt übergeben, sind die Eigenschaften dieses Objekts weiterhin abhörbar.

Der durch „Inject“ eingefügte Wert wird gemäß dem „Näheprinzip“ entlang der Komponente nach oben gesucht.

Der Datenfluss beim Bereitstellen und Einfügen ist bidirektional.

5. Ereignisbus

EventBus veröffentlicht und abonniert globale Ereignisse zur Verwendung durch andere Komponenten.

In main.js:

Vue.prototype.$bus = neues Vue();

übergeordnetes Element.vue:

<Vorlage>
  <div>
    <Sohn1></Sohn1>
    <Sohn2></Sohn2>
  </div>
</Vorlage>

<Skript>
importiere son1 aus './son1.vue'
importiere son2 aus './son2.vue'
Standard exportieren {
  Name: "Elternteil",
  Komponenten:
    Sohn1,
    Sohn2
  },
  erstellt(){
     dies.$bus.$on('busEvent',(v)=>{
      konsole.log(v);
    })
  },
  vorZerstören(){
    dies.$bus.off('busEvent')
  }
}
</Skript>

in son1 und son2 montiert:

Sohn1:montiert(){
  this.$bus.$emit('busEvent','son1-Event')
}son2:mounted(){ this.$bus.$emit('busEvent', 'son2-Ereignis')}

Druckergebnisse:

Bei der Verwendung von eventBus sind drei Punkte zu beachten: 1. $bus.on sollte im Create-Hook verwendet werden. Wenn es in Mount verwendet wird, empfängt es möglicherweise keine von anderen Komponenten gesendeten Ereignisse vom Create-Hook.

2.$bus.emit sollte beim Mounten verwendet werden und darauf gewartet werden, dass die $bus.on-Ereignisbindung bei der Erstellung abgeschlossen wird.

3. Die veröffentlichten abonnierten Ereignisse müssen mit $bus.off im beforeDestory-Hook freigegeben werden. Es besteht keine Notwendigkeit, weiter zuzuhören, nachdem die Komponente zerstört wurde.

6. vuex

Mithilfe der Zustandsverwaltung von Vuex wird die Komponentenkommunikation erreicht. Vuex eignet sich für komplexere Projekte, häufigen Datenaustausch und große Datenmengen.

store/index.js:

Vue von „vue“ importieren
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)

const store = neuer Vuex.Store({
  Zustand: {
    isLogin: false
  },
  Mutationen:
    loginState (Status, istAnmeldung) {
      state.isLogin = istLogin
    }
  }
})

Standardspeicher exportieren

App.vue:

erstellt(){
  this.$store.commit('loginState',true)//Anmeldestatus auf true setzen
},

Sohn.vue:

<Vorlage>
  <div>Ich bin ein Sohn: <input type="button" value="son" />Anmeldestatus: {{isLogin}}</div>
</Vorlage>

<Skript>
importiere {mapState} von „vuex“;
Standard exportieren {
  Name: "Sohn",
  berechnet:{
    ...mapState(['istLogin'])
  }
};
</Skript> 

7. lokaler Speicher

LocalStorage ist der lokale Speicher des Browsers, der für längere Zeit im Browser gespeichert wird. Es wird nicht empfohlen, diese Methode für sehr große Datenmengen zu verwenden.

App.vue

erstellt(){
  localStorage.setItem('istLogin', true)
},

Sohn.vue:

berechnet:{
  istLogin(){
    returniere localStorage.getItem('isLogin')
  }
}

Dies sind im Wesentlichen die üblichen Kommunikationsmethoden für Komponenten. Wenn es Auslassungen oder Mängel gibt, hinterlassen Sie bitte eine Nachricht im Kommentarbereich!

Zusammenfassen

Dies ist das Ende dieses Artikels über die Kommunikation zwischen Vue-Komponenten. Weitere relevante Inhalte zur Kommunikation zwischen Vue-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!