Vue-Elternkomponente ruft Funktionsimplementierung der Unterkomponente auf

Die übergeordnete Vue-Komponente ruft die Funktion der untergeordneten Komponente auf

Die übergeordnete Komponente ruft über das Ereignis die Funktion der untergeordneten Komponente auf. Beispielsweise ermöglicht die übergeordnete Komponente der untergeordneten Komponente, eine Anforderung über ein Klickereignis zu senden.

Das Projekt im Artikel wurde durch Scaffolding erstellt.

DEMO:

Vater.js
<Vorlage>
    <div>
        <div>
            <son ref="son"></son>
            <input type="button" value="klicken" @click="useSonFun">
        </div>  
    </div>
</Vorlage>

<Skript>
Sohn aus './son' importieren
Standard exportieren {
    Komponenten: {
        Sohn
    },
    Daten(){
        zurückkehren {
            
        }
    },
    Methoden: {
        benutzeSonFun(){
            this.$refs.son.say(); //Geben Sie der untergeordneten Komponente einen Ref und rufen Sie die Funktion in der untergeordneten Komponente über den Ref auf}
    },
}
</Skript>

Sohn.js
<Vorlage>
    <div>
        <h1>SOHN</h1>
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Daten(){
        zurückkehren {
            
        }
    },
    Methoden:{
        say(){//Unterkomponentenfunktion, die von der übergeordneten Komponente aufgerufen werden muss console.log("SON COMPONENT");
        }
    },
}
</Skript>

Rendern

Die übergeordnete Komponente ruft die Funktion der untergeordneten Komponente auf. Sie können damit eine Anfrage senden, indem Sie auf die übergeordnete Komponente klicken. Basierend auf dem Klickereignis sendet die untergeordnete Komponente ebenfalls eine Anfrage. Dies kann davon unterschieden werden, dass die übergeordnete Komponente per Klick eine Anforderung sendet, Daten abruft und die Daten dann über die Methode zur Wertübergabe der Komponente an die untergeordnete Komponente weitergibt.

Tipps:

Vater.js:
this.$refs.son.say (die Daten der übergeordneten Komponente können in Klammern an die untergeordnete Komponente übergeben werden);
Son.js:
sagen wir (Daten von der übergeordneten Komponente an die untergeordnete Komponente empfangen){
	//Verwendung der Daten}

Dies ist das Ende dieses Artikels über die Einführung und Verwendung des Beobachtermusters im Java-Entwurfsmuster. Weitere relevante Inhalte zum Beobachtermuster finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!