Dieser Artikel ist ein detaillierteres und umfassenderes Tutorial, das vom Herausgeber in Kombination mit offiziellen Dokumenten zusammengestellt wurde. Es ist sehr gut und für Anfänger besser zu lesen.
Dieser Artikel stammt aus dem offiziellen Dokument:
http://cn.vuejs.org/guide/components.html#u7236_u5b50_u7ec4_u4ef6_u901a_u4fe1
Eltern-Kind-Komponentenkommunikation
① Zugriff auf untergeordnete Komponenten, übergeordnete Komponenten und Stammkomponenten;
Dies. $ Elternzugriff über Elternkomponente zugreifen
Dies. $ Kinder greifen auf Kinderkomponenten zu (ist ein Array)
Dies.
Beispielcode:
<div id="app"> Parent component: <input v-model="val"><br/> Child component: <test :test="val"></test> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, components: { test: { props: ['test'], template: "<input @keyup='findParent' v-model = 'test'/> ", Methoden: {findParent: function () {console.log (this. $ parent); // Zugriff auf die Stammkomponentenkonsole.log (this. $ parent.val); // Zugriff auf die VAL-Eigenschaftskonsole der Stammkomponente. // Überprüfen Sie, ob die übergeordnete Komponente und die Stammkomponente kongruent sind (da ihre übergeordnete Komponente die Stammkomponente ist)}}}}}}); </script>Wenn die Tasten im Eingabefeld des Unterkomponenten auftauchen, sind die angezeigten Inhalte:
Der Wert des Eingangsfelds der übergeordneten Komponente und der übergeordneten Komponente (die Standardeinstellung ist 1), 0 (stellt, dass es das erste Element im untergeordneten Attribut der übergeordneten Komponente ist) und wahr (da die übergeordnete Komponente die Stammkomponente ist, ist es kongruent);
Auf diese Weise kann die Interaktion im Komponentenbaum durchgeführt werden.
②Stom -Ereignisse:
Zunächst müssen Ereignisse eher in der Ereignis -Eigenschaft als in der Eigenschaft von Methoden platziert werden (ein Fehler, den Anfänger wahrscheinlich machen). Sie können nur Ereignisse in der Ereigniseigenschaft auslösen, während Ereignisse in der Eigenschaft der Methoden nicht ausgelöst werden können.
Zweitens gibt es einen Unterschied zwischen Aufwärtsverteilung und Abwärtsübertragung: Aufwärtsverteilung löst ein gleichnamiges Ereignis aus, während die Abwärtsübertragung nicht wird.
Drittens wird die Aufwärtsverteilung und die Abwärtsübertragung nur Ereignisse für direkte Linien (Kinder oder Eltern, Ausnahme von Vorfahren und Enkelkind) ausgelöst und werden diese Zeile fortsetzen, es sei denn, der Ereignisrückgabewert ist wahr.
Viertens kann das Ereignis nicht explizit aufgerufen werden. Ereignisname.
Beispielcode:
<div id = "app"> übergeordnete Komponente: <button @klick = "parentClick"> klicken, um die Broadcast nach unten zu verbreiten ParentClick: Funktion () {this. wird weiterhin verteilte Requisiten sein: ['test'], Vorlage: "<button> Kinder1 </button> </br> subcomponent 2: <kinder2> </children2>", Ereignisse: {ChildRenclick: Funktion () {console.log ("childrenclick-children1"); console.log ("meldung:" + msg); console.log ("childrenclick-children2"); von der untergeordneten Komponente: ['Test'], Vorlage: "<Butth> AnotherChildren1 </button> </br> Eine andere untergeordnete Komponente 2: <Ein anderes Children2> </eine andere Children2>", Ereignisse: {ChildRenclick: Funktion () {console.log ("Childrenclick-Anotherchildren1"); console.log ("parentClick-anotherchildren1"); this. } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}veranschaulichen:
【1】 Klicken Sie auf die Schaltfläche der übergeordneten Komponente, die nach unten sendet und dann die untergeordnete Komponente 1 selbst, eine andere untergeordnete Komponente 1 und eine andere untergeordnete Komponente 2 ausgelöst;
【2】 Wenn Sie auf die Schaltfläche der untergeordneten Komponente 2 klicken, wird das Ereignis der untergeordneten Komponente 2 und das Ereignis der untergeordneten Komponente 1 ausgelöst, jedoch nicht die Taste der übergeordneten Komponente ausgelöst.
【3】 Klicken Sie auf die Schaltfläche einer anderen untergeordneten Komponente 2 löst das Ereignis einer anderen untergeordneten Komponente 2 aus, das Ereignis einer anderen untergeordneten Komponente 1 und das Ereignis der übergeordneten Komponente (da der Rückgabewert des Ereignisses einer anderen untergeordneten Komponente 1 wahr ist).
③ Verwenden Sie V-on, um benutzerdefinierte Ereignisse zu binden:
[1] Einfach gesagt, wenn eine untergeordnete Komponente ein Ereignis (die Methode in Ereignissen) auslöst, führt die übergeordnete Komponente auch eine Methode aus (die Methode in übergeordneten Komponentenmethoden).
[2] Die ausgelöste Bindung ist in der Vorlage geschrieben (dh der ersetzten Vorlagenvorlage). Mehrere untergeordnete Komponenten können eine übergeordnete Komponentenmethode binden, oder verschiedene untergeordnete Komponenten können eine andere Methode für Elternkomponenten binden, aber das gleiche Ereignis für untergeordnete Komponenten kann keine Methode binden.
【3】 Die untergeordnete Komponente sendet Parameter für die Verabschiedung von Nachrichten. Auch wenn das Ereignis der untergeordneten Komponente keine Parameter aufweist, wirkt sich nicht die Methode zur Übergabe der Parameter an die übergeordnete Komponente aus (dh die Methode der übergeordneten Komponente kann Parameter akzeptieren, die von der untergeordneten Komponentenmethode erhalten werden).
Als Beispiel:
<div id = "app"> übergeordnete Komponente: <Butt> Klicken Sie Klicken, um die Broadcast zu verbreiten </button> <br/> Child-Komponente 1: <!-Bindung wird hier geschrieben. Multiple bindings can be bound to the same one, or different bindings are different, but multiple cannot be bound to one--> <children v-on:test="parent" @test2="another"></children> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, methods: { parent: function (arg) { console.log(arg); console.log("the first method with test Ereignis ");}, eine andere: function () {console.log (" eine andere Methode ");}}, Komponenten: {Kinder: {// Dies hat keinen Rückgaberwert und wird nicht weiter verteilt. () {this. $ emit ("test", 'das Argument für den Versand'); </script>④ Subcomponent Index
Einfach ausgedrückt: Sie können Unterkomponenten direkt aus dem Index abrufen, und dann können Sie die Methoden der einzelnen Unterkomponenten aufrufen.
Die Methode zum Hinzufügen von Index lautet: Hinzufügen von V-Ref zum Tag: Indexname
Die Methode zum Aufrufen der Komponente ist: vm. $ Ref. Indexname
Sie können dies auch verwenden. $ Ref. Der Indexname direkt in der übergeordneten Komponente
Zu diesem Zeitpunkt können Sie die Komponente erhalten, und dann kann die Komponente ihre Methoden aufrufen oder ihre Daten verwenden.
Beispielcode:
<div id = "app"> übergeordnete Komponente: <button @klick = "todo"> Ereignisse, die untergeordnete Komponente auslösen </button> <br/> Subcomponent 1: <!-Bindung wird hier geschrieben. Mehrere Bindungen können an die gleiche oder unterschiedliche Bindungen gebunden sein, aber mehrere können nicht an eins gebunden werden-> <Kinder V-Ref: Child> </children> </div> <script> var vm = new Vue ({el: '#app', Methoden: {todo: function () {this. Oder </script>Das obige ist der VueJS-Artikel 10. Vuejs Parent-Kind-Komponentenkommunikation, der Ihnen vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!