Mehrere Möglichkeiten zum Übergeben von Daten von übergeordneten Komponenten an untergeordnete Komponenten in Vue

Ich habe kürzlich den Quellcode von Vue studiert und mehrere Methoden zum Übertragen von Daten zwischen übergeordneten und untergeordneten Komponenten in Vue zusammengefasst.

1. Requisiten & Events

Die übergeordnete Komponente übergibt Props-Daten an die untergeordnete Komponente und die untergeordnete Komponente gibt Daten an die übergeordnete Komponente zurück, indem sie Ereignisse auslöst. Der Code lautet wie folgt:

//Unterkomponente <Vorlage>
    <div @click="changeName('YYY')">{{name}}</div>
</Vorlage>
<Skript>
Standard exportieren{
    props:['name'], //oder props:{name:{type:String,default:''}}
    Methoden:{
        //Sie können die Props-Daten in untergeordneten Komponenten nicht ändern. Sie sollten ein Ereignis für die übergeordnete Komponente auslösen, um changeName(newName) zu verarbeiten.{
            dies.$emit('changeName',newName)
        }
    }
}
</Skript>
 
//Übergeordnete Komponente <template>
    <div>
        <child-comp :name="name" @changeName="changeName"></child-comp>
    </div>
</Vorlage>
<Skript>
    importiere childComp aus „Pfad“
    Standard exportieren{
        Daten(){
            zurückgeben {name:'XXX'}
        },
        Komponenten: {
            KinderComp
        },
        Methoden:{
            ändereName(neuerName){
                dieser.name = neuerName;
            }
        }
    }
</Skript>

Das Obige ist ein vollständiger Prozess. Die übergeordnete Komponente übergibt Daten über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente löst das Ereignis aus, das von der übergeordneten Komponente abgehört und entsprechend verarbeitet wird.

2.Referenz

Das ref-Attribut kann für eine untergeordnete Komponente oder ein natives DOM definiert werden. Wenn es sich um eine untergeordnete Komponente handelt, verweist es auf die Instanz der untergeordneten Komponente. Wenn es sich um das native DOM handelt, verweist es auf das native DOM-Element (das zur Elementauswahl verwendet werden kann, wodurch das Problem mit querySelector entfällt).

Die Idee der Datenübertragung ist: Holen Sie sich die Instanz der untergeordneten Komponente über den Verweis in der übergeordneten Komponente, rufen Sie dann die Methode der untergeordneten Komponente auf und übergeben Sie die relevanten Daten als Parameter. Der Code lautet wie folgt:

//Unterkomponente <Vorlage>
    <div>{{parentMsg}}</div>
</Vorlage>
<Skript>
Standard exportieren{
    Daten(){
        zurückkehren {
            übergeordnete Nachricht:''
        }
    },
    Methoden:{
        getMsg(msg){
            diese.parentMsg = msg;
        }
    }
}
</Skript>
 
//Übergeordnete Komponente <template>
    <div>
        <child-comp ref="child"></child-comp>
        <button @click="sendMsg">NACHRICHT SENDEN</button>
    </div>
</Vorlage>
<Skript>
    importiere childComp aus „Pfad“
    Standard exportieren{
        Komponenten: {
            KinderComp
        },
        Methoden:{
            sendMsg(){
                this.$refs.child.getMsg('Übergeordnete Nachricht');
            }
        }
    }
</Skript>

3. provide & inject werden nicht offiziell für den Einsatz in Produktionsumgebungen empfohlen

Bereitstellen bedeutet bereitstellen. Wenn eine Komponente Daten über „bereitstellen“ bereitstellt, können ihre untergeordneten Komponenten die Injektion mithilfe von „inject“ akzeptieren, sodass sie die von der übergeordneten Komponente übergebenen Daten verwenden können. Der Code lautet wie folgt:

//Kind
<Vorlage>
    <div>{{AppName}}</div>
</Vorlage>
<Skript>
Standard exportieren{
    injizieren:['Anwendungsname']
}
</Skript>
 
//Wurzel 
Standard exportieren{
    Daten(){
        zurückkehren {
            Anwendungsname: „Test“
        }
    },
    bereitstellen:['appName']
}

4.vuex

Von Vue offiziell empfohlenes Plug-In zur globalen Statusverwaltung. Keine Details.

Damit ist dieser Artikel über verschiedene Methoden zum Übergeben von Daten von übergeordneten Komponenten an untergeordnete Komponenten in Vue abgeschlossen. Weitere Informationen zum Übergeben von Daten von übergeordneten Komponenten an untergeordnete Komponenten 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!