Acht Beispiele, wie Vue Komponentenkommunikation implementiert

Für Vue ist die Nachrichtenübermittlung zwischen Komponenten sehr wichtig. Hier ist meine Zusammenfassung der gängigen Methoden der Nachrichtenübermittlung zwischen Komponenten:

1. Props übergeordnete Komponente ---> untergeordnete Komponente Kommunikation

Übergeordnete Komponente --- Übertragung der Eigenschaften an die untergeordnete Komponente

Unterkomponenten --- empfangen Daten im Props-Modus

<Son :datas="fData"></Son>

<Skript>
importiere Son von '@/components/son'
  Standard exportieren{
    Name:'Vater',
    Komponenten: {Son},
    Daten(){
      zurückkehren {
        fData: „Ich bin der Wert, der von der übergeordneten Komponente an die untergeordnete Komponente übergeben wird – Props-Methode“
      }
    }
  }
</Skript>

Der von den Eigenschaften der untergeordneten Komponente akzeptierte Parametername muss mit dem Eigenschaftsnamen übereinstimmen, der bei der Übergabe der übergeordneten Komponente definiert wurde.

<Vorlage>
  <div>Ich bin die Daten der übergeordneten Komponente: {{fData}}</div>
  <div @click=changeData>Ich bin die übergeordnete Komponente, die die geänderten Daten übergibt: {{mydata}}</div>
</Vorlage>
<Skript>
  Standard exportieren{
    Name: 'Sohn',
    Requisiten:{
      fDaten:{
        Typ: Zeichenfolge,
        Standard:''
      }
    }
    Daten(){
      meineDaten:diese.VaterDaten
    },
    Methoden:{
     Daten ändern(){
        this.mydata += 'Daten ändern'
      }
    },
  }
</Skript>

Beachten:

• Untergeordnete Komponenten können die von übergeordneten Komponenten übergebenen Werte nicht direkt ändern: Aufgrund des Einweg-Datenflussmechanismus von Vue wird der Wert der übergeordneten Komponente „verunreinigt“, wenn er direkt geändert wird. (props ist eine Einwegbindung (schreibgeschützte Eigenschaft): Wenn sich die Eigenschaft der übergeordneten Komponente ändert, wird sie an die untergeordnete Komponente übertragen, aber nicht umgekehrt)
  Die Fehlermeldung lautet wahrscheinlich: Vue verwendet einen Prop-Kommunikationsfehler: Vermeiden Sie die direkte Mutation eines Props, da der Wert überschrieben wird, wenn das übergeordnete Element
• Lösung: Sie können eine Variable mydata in der Unterkomponente definieren, um fData-Daten zu empfangen
• Wenn der Parameterübergabetyp unsicher ist, können Sie ihn wie folgt schreiben:
  

Requisiten:{
    fDaten:{
        Typ: [Zeichenfolge, Zahl],
        Standard:''
    }
}

2. $emit untergeordnete Komponente ---> Übertragung der übergeordneten Komponente

• Benutzerdefinierte Ereignisse für die Bindung von Unterkomponenten
  
• Der erste Parameter von $emit() ist: der benutzerdefinierte Ereignisname und der zweite Parameter sind: die zu übergebenden Daten
  
• Verwenden Sie $emit(), um Änderungen an Daten auszulösen
  

Unterkomponenten

<el-button @click="handleEmit">Übergeordnete Komponente ändern</el-button>

<Skript>
 Standard exportieren{
   Name: 'Sohn',
   Methoden:{
     handleEmit(){
       this.$emit('triggerEmit','Unterkomponentendaten')
     }
   }
 }
</Skript>

Übergeordnete Komponente (der von der untergeordneten Komponente gesendete Ereignisname muss mit dem von der übergeordneten Komponente akzeptierten Ereignisnamen übereinstimmen)

<Son @triggerEmit="changeData"></Son>

<Skript>
 importiere Son von '@/components/son'
 Standard exportieren{
   Name:'Vater',
   Komponenten: {Son},
   Methoden:{
     Daten ändern(Name){
       console.log(name) // => Ich bin die Daten aus der untergeordneten Komponente}
   }
 }
</Skript>

$emit und Props kombiniert mit Geschwisterkomponenten zur Übergabe von Werten

• Die übergeordnete Komponente führt zwei untergeordnete Komponenten ein
• Die übergeordnete Komponente fungiert als Brücke
  

Übergeordnete Komponente

<childA :meinName="name"></ChildA>
<KindB :meinName="Name" @changeName="editName"></KindB>  
    
Standard exportieren{
  Daten() {
    zurückkehren {
      Name: „Hallo Daten“
    }
  },
  Methoden: {
    Name bearbeiten(Name){
      dieser.name = Name
    }
  }
}

Unterkomponente B ändert und empfängt Daten

<p>Name: {{ meinName }}</p>

<button @click="changeName">Name ändern</button>
    
<Skript>
Standard exportieren{
  Requisiten: {
    meinName:String
  },
  Methoden: {
    ändereName() {
      this.$emit('changeName', 'neuer Datenname')
    }
}
}
</Skript>

Unterkomponente A empfängt Daten

<p>Name: {{ neuerName }}</p>
    
<Skript>
Standard exportieren{
  Requisiten: {
    meinName:String
  }
}
</Skript>

3. Bus (Event Bus) Brother Komponentenkommunikation

Übertragen von Werten zwischen anderen Komponenten als übergeordneten und untergeordneten Komponenten oder zwischen Komponenten auf mehreren Ebenen. In Vue werden separate Ereigniszentren verwendet, um die Übertragung von Werten zwischen Komponenten zu verwalten.

1. Erstellen Sie eine öffentliche bus.js-Datei
2. Verfügbarmachen der Vue-Instanz
3. Der Datenübertragungsteilnehmer löst bus.$emit (Methodenname, übertragene Daten) durch ein Ereignis aus.
4. Der Datenempfänger hört die Daten über bus.$on(Methodenname, [Params]) in der Lebenszyklusfunktion ab.
5. Zerstörungsereignis. Auf der Empfangsseite können die Daten nicht überwacht werden, nachdem sie durch bus.$off(Methodenname) zerstört wurden.

Vue von „vue“ importieren
const bus = neuer Vue()
Standardbus exportieren

Definieren Sie den Aufruf in der Komponente, die die Daten ändern muss

<Vorlage>
  <div>
    <div>Ich bin Kommunikationskomponente A</div>
    <button @click="changeName">Name ändern</button>
  </div>
</Vorlage>

<Skript>
Bus aus "@/utils/Bus.js" importieren;
Standard exportieren {
  Komponenten: {},
  Daten() {
    zurückkehren {};
  },
  montiert() {
    Konsole.log(Bus);
  },
  Methoden: {
    ändereName() {
      bus.$emit("editName", "Datensatz!");
    },
  },
};
</Skript>

<style lang='scss' scoped>
</Stil>

Die Datei bus.js wird auch in einer anderen Komponente eingeführt und der Ereignisrückruf wird über $on überwacht

<Vorlage>
  <div>
  <span>Name: {{name}}</span>
    <div>Ich bin Kommunikationskomponente B</div>
  </div>
</Vorlage>

<Skript>
Bus aus "@/utils/Bus.js" importieren;
Standard exportieren {
  Komponenten: {},
  Daten() {
    gib {name} zurück;
  },
  montiert() {
    bus.$on("editName", (name) => {
        dieser.name=Name
      konsole.log(Name); // 
    });
  },
  Methoden: {},
};
</Skript>

<style lang='scss' scoped>
</Stil>

4. $parent, $children greifen direkt auf Komponenteninstanzen zu

• Die untergeordnete Komponente erhält die Instanz der übergeordneten Komponente über ---> $parent
• Die übergeordnete Komponente erhält das Instanzarray der untergeordneten Komponente über ---> $children
  

Untergeordnete Komponente --- this.$parent kann die Methoden, Daten usw. der übergeordneten Komponente abrufen und direkt verwenden und ausführen

<Vorlage>
  <div>Ich bin eine untergeordnete Komponente</div>
</Vorlage>

<Skript>
Standard exportieren{
  Name:"Sohn",
  Daten(){
    zurückkehren {
      sonTitle: „Ich bin die Daten der untergeordneten Komponente“
    }
  },
  Methoden:{
    SohnHandle(){
      console.log('Ich bin eine Methode einer Unterkomponente')
    }
  },
  erstellt(){
    konsole.log(dieses.$übergeordnetes)
    console.log(this.$parent.fatherTitle) // => Ich bin die Daten der übergeordneten Komponente this.$parent.fantherHandle() // => Ich bin die Methode der übergeordneten Komponente }
}
</Skript>

Übergeordnete Komponente --- Ruft die Instanz der untergeordneten Komponente ab. Die erhaltene Instanz hat die Form eines Arrays. Mit diesem $children[0] kann eine Komponenteninstanz abgerufen und Komponentenmethoden und -daten aufgerufen werden.

<Vorlage>
  <div>
    <Son>Ich bin die übergeordnete Komponente</Son>
  </div>
</Vorlage>

<Skript>
importiere Son aus './son.vue'

Standard exportieren{
  Name: 'Vater',
  Komponenten: {
    Sohn
  },
  Daten(){
    zurückkehren {
      fatherTitle: „Ich bin die Daten der übergeordneten Komponente“
    }
  },
  Methoden:{
    fantherHandle(){
      console.log('Ich bin die Methode der übergeordneten Komponente')
    }
  },
  montiert(){
    Konsole.log(diese.$Kinder)
    console.log(this.$children[0].sonTitle) // => Ich bin die Daten der untergeordneten Komponente this.$children[0].sonHandle() // => Ich bin die Methode der untergeordneten Komponente }
}
</Skript>

5. $refs

Mit „ref“ werden Referenzinformationen für ein Element oder eine Unterkomponente registriert. Die Referenzinformationen werden im $refs-Objekt der übergeordneten Komponente registriert.

Die übergeordnete Komponente verwendet $refs, um die Komponenteninstanz abzurufen

<Vorlage>
  <div>
    <Sohn ref="Sohn"></Sohn>
  </div>
</Vorlage>

<Skript>
importiere Son aus './son.vue'

Standard exportieren{
  Name: 'Vater',
  Komponenten: {
    Sohn
  },
  montiert(){
    console.log(this.$refs.son) /*Komponenteninstanz*/
  }
}
</Skript>

6. Bereitstellen/Injizieren (Providen/Injizieren) von Mehrkomponenten- oder Deep-Component-Kommunikation

Detaillierte Erklärung zu provide/inject

• Die übergeordnete Komponente verwendet provide, um Daten einzufügen
• Unterkomponenten verwenden Inject, um Daten zu verwenden
  

/* Übergeordnete Komponente */
Standard exportieren{
 bieten:
   zurückkehren {
     provideName: 'Verkaufs-Frontend'
   }
 }
}

An diesem Punkt kann die Variable provideName allen untergeordneten Komponenten, einschließlich Urenkeln, Enkeln usw., bereitgestellt werden, und die Daten können einfach durch die Verwendung von inject abgerufen werden.

/*Unterkomponente*/
Standard exportieren{
  einfügen: ['provideName'],
  erstellt () {
    console.log(this.provideName) // => "Frontend verkaufen"
  }
}

• Die übergeordnete Komponente muss nicht wissen, welche Komponente die von ihr bereitgestellten Daten verwendet.
• Der Unteranhang muss nicht wissen, woher die Daten stammen
  

7. Slot (Slot-Scope-Bereich Slot) untergeordnetes Element --> übergeordnetes Element (ähnlich wie bei der Kommunikation)

• Wird als wiederverwendbare Vorlage (an die Daten weitergegeben werden können) verwendet, um das gerenderte Element zu ersetzen.
• Übergeben Sie in der untergeordneten Komponente die Daten einfach an den Slot, so wie Sie eine Requisite an eine Komponente übergeben würden.
• Hinweis: Der übergeordnete Slot erhält den Inhalt als äußerstes Element und muss über das Slot-Scope-Attribut verfügen
  

Untergeordnete Elemente

<Vorlage>
  <div>
    <div Klasse="isSon">
        <slot :info='arrList'></slot>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Komponenten: {},
  Daten() {
    return {arrList:[1,'aa','Nicht verwenden']};
  },
  montiert() {
  },
  Methoden: {
    
  },
};
</Skript>

Übergeordnetes Element

<Vorlage>
<div>
    <SonG>
        <span slot-scope="Eigenschaften">
            <ul>
                ein
                <li v-for="Artikel in props.info" :key="Artikel">
                    {{Artikel}}
                </li>
            </ul>
        </span>
    </SonG>
</div>
</Vorlage>

<Skript>

importiere SonG aus '../components/SonG.vue'
Standard exportieren {
   Komponenten: {
       Lied
   },
   Daten () {
       zurückkehren {
       }
   }
}
</Skript>

8. Vuex-Statusverwaltung

Äquivalent zu einem öffentlichen Data Warehouse

Bereitstellung einiger Methoden zur Verwaltung von Lagerdaten

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

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
  },
  Mutationen:
  },
  Aktionen: {
  },
  Module:
  }
})

Zusammenfassen

Damit ist dieser Artikel über acht Möglichkeiten zur Implementierung der Komponentenkommunikation in Vue abgeschlossen. Weitere relevante Inhalte zur Implementierung der Komponentenkommunikation in Vue 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!