Dieser Artikel stammt aus dem offiziellen Dokument:
http://cn.vuejs.org/guide/components.html#props
Dieses Tutorial ist ein detaillierteres und umfassenderes Tutorial, das vom Herausgeber in Kombination mit offiziellen Dokumenten zusammengestellt wurde, was besonders für Anfänger zu lesen ist.
Requisiten Datenbereitstellung
①Scope von Komponenteninstanzen:
Es ist isoliert und einfach ausgedrückt, die Werte werden nicht zwischen den Komponenten geteilt, selbst wenn es ein gleichnamiges Attribut gibt.
<div id="app"> <add></add> <del></del> </div> <script> var vm = new Vue({ el: '#app', components: { "add": { template: "<button>btn: {{btn}}</button>", data: function () { return {btn: "123"}; } } }, del: { Vorlage: "butth> btn: {{btn}} </button>", data: function () {return {btn: "456"}; </script>Das Rendering -Ergebnis ist:
2 Tasten, der erste hat einen Wert von 123 und der zweite einen Wert von 456 (obwohl sie beide BTN sind)
② Verwenden Sie Requisiten, um statische Daten zu binden:
[1] Diese Methode wird verwendet, um Zeichenfolgen zu übergeben, und der Wert wird auf das benutzerdefinierte Element der übergeordneten Komponente geschrieben.
【2】 Das folgende Beispiel kann den Wert im Datenattribut der übergeordneten Komponente nicht übergeben
【3】 Es wird den gleichnamigen Wert im Datenattribut der Vorlage überschreiben.
Beispielcode:
<div id="app"> <add btn="h"></add> </div> <script> var vm = new Vue({ el: '#app', data: { h: "hello" }, components: { "add": { props: ['btn'], template: "<button>btn: {{btn}}</button>", data: function () { return {btn: "123"};}}}}); </script>Nach dieser Schreibmethode ist der Wert von BTN H, nicht 123 oder Hallo.
【4】 Kamelschreibmethode
Wenn die Interpolation Kamel ist,
Im HTML-Tag sollten die Werte, die in das HTML-Tag übergeben werden sollen, als kurze horizontale Linie (z. B. BTN-Test) als Fallempfindlichkeit geschrieben werden.
In dem Props -Array sollte es mit der Interpolation übereinstimmen und als Kamel (wie btntest) geschrieben.
Zum Beispiel:
Requisiten: ['Btntest'], Vorlage: "<Butth> btn: {{btntest}} </button>",Richtiges Schreiben:
<hinzufügen btn-test = "h"> </add>
Wenn die Interpolation in einem kurzen horizontalen Zeilentyp geschrieben ist oder das HTML -Tag in einem Kamelstil geschrieben ist, wird sie nicht normal wirksam. (Es sei denn
③bind dynamische Daten mit Requisiten:
Einfach ausgedrückt wird eine bestimmte Interpolation der untergeordneten Komponente mit den Daten der übergeordneten Komponente überein.
Die Standardmethode zum Schreiben ist (mit V-Bind):
<Hinzufügen von V-Bind: Der Wert der untergeordneten Komponente = "Eigenschaft der übergeordneten Komponente"> </add>
Als Code
<div id="app"> <add v-bind:btn="h"></add> </div> <script> var vm = new Vue({ el: '#app', data: { h: "hello" }, components: { "add": { props: ['btn'], template: "<button>btn: {{btn}}</button>", data: function () {return {'btn': "123"}; </script>veranschaulichen:
【1】 Der Wert von H in den von BTN verwendeten übergeordneten Komponentendaten;
【2】 Der Rückgabewert in der Funktion der Daten der untergeordneten Komponente wird überschrieben.
[3] Mit anderen Worten wird der Wert der übergeordneten Komponente (basierend auf dem Attributnamen) verwendet, und der Wert der Etikett wird als Zeichenfolge verwendet.
【4】 Es muss noch Requisiten verwenden, ansonsten wird der Wert von BTN in seinen Daten verwendet
④literale und dynamische Syntax:
[1] Einfach ausgedrückt, wenn Sie keine V-Binds hinzufügen, passieren Sie eine wörtliche Menge, dh Sie werden als Zeichenfolge behandelt (z. B. 1 ist auch eine Zeichenfolge, nicht eine Zahlentyp).
【2】 V-Bind hinzufügen, der JS-Ausdruck wird übergeben (so kann der Wert der übergeordneten Komponente übergeben werden);
【3】 Nach dem Hinzufügen von V-Bind wird der Wert der übergeordneten Komponente verwendet, wenn der Wert der übergeordneten Komponente gefunden werden kann. Wenn es keinen entsprechenden gibt, wird es als JS -Ausdruck angesehen (z. B. wird 1+2 als 3 angesehen, {a: 1} wird als Objekt angesehen);
Als Code:
<div id = "app"> <v-bind: btn = "1+2"> </add> </div> <script> var vm = new Vue ({el: '#app', data: {h: "hello"}, components: {"add": {Props: ['btn'], template: "butth} {butth} {btn} {{}}} {} {/</</</<Boodes} {{}} {{} {/</</</<Boodes> btn: {{}}}} {}}}} {}}} {/</</</</</<:" </</<: "</</<:" </</<Boodes} Btn. }); </script>Der Wert von BTN hier ist 3 (anstelle von 1+2 als Zeichenfolge, ohne V-Bind hinzuzufügen)
⑤Props -Bindungstyp:
[1] Einfach ausgedrückt ist es in zwei Typen unterteilt, nämlich eine Einwegbindung (die übergeordnete Komponente kann die untergeordnete Komponente beeinflussen, das Gegenteil ist jedoch nicht möglich) und eine Zwei-Wege-Bindung (die untergeordnete Komponente kann auch die übergeordnete Komponente beeinflussen).
【2】 Einweg-Bindungsbeispiel: (Standard oder Verwendung .once)
<div id="app"> Parent component: <input v-model="val"><br/> Child component: <test v-bind:test-Val="val"></test> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, components: { "test": { props: ['testVal'], template: "<input v-model = 'testval'/> "}}}); </script>veranschaulichen:
Wenn der Wert der übergeordneten Komponente geändert wird, ändert sich auch der Wert der untergeordneten Komponente.
Wenn der Wert der untergeordneten Komponente geändert wird, ändert sich der Wert der übergeordneten Komponente nicht. Wenn der Wert der übergeordneten Komponente erneut geändert wird, wird die untergeordnete Komponente erneut synchronisiert.
Es sollte auch beachtet werden, dass, wenn eine untergeordnete Komponente synchron gebunden sein möchte, die Eingabe der untergeordneten Komponente ein V-Modell sein muss, kein Wertschriftenattribut (das nur eine einzelne Elementbindung sein kann, und die Bindung geht nach dem Ändern des Wertes der untergeordneten Komponente verloren)
【3】 Bi-Way-Bindung:
".Sync" ist als Modifikator erforderlich
Als Beispiel:
<div id = "app"> übergeordnete Komponente: <Eingabe v-model = "val"> <br/> untergeordnete Komponente: <test: test.sync = "val"> </test> </div> <script> var vm = new VUE ({El: '#app', Data: {val: 1}, Komponenten: {"test": {test ": {test": {test ": {props: ['test' v-model = 'test'/> "}}}); </script>Der Effekt ist, dass sich der andere, welchen Wert Sie ändern, sich entsprechend ändern.
【4】 Props Überprüfung:
Einfach ausgedrückt, wenn die Komponente Daten erhält, wird sie zur Überprüfung verwendet und wird nur dann verwendet, wenn die Bedingungen erfüllen.
Die Schreibmethode besteht darin, Requisiten in ein Objekt umzuwandeln, der zu verifizierte Wert ist der Schlüssel des Objekts, und die Verifizierungsbedingung ist der Wert, der dem Schlüssel entspricht.
Zum Beispiel:
Requisiten: {test: {twoway: true}},Stellen Sie sicher, dass die Testvariable zweiwege gebunden ist, und wenn dies nicht der Fall ist, wird ein Fehler gemeldet. (Beachten Sie, dass dies nicht zur Überprüfung der Einwegbindung verwendet werden kann).
Der Beispielcode lautet wie folgt:
<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: { twoWay: true } }, template: "<input v-model = 'test'/> "}}}); </script>Weitere Überprüfungsarten finden Sie im offiziellen Tutorial:
http://cn.vuejs.org/guide/components.html#prop__u9a8c_u8bc1
Das obige ist eine detaillierte Erläuterung des Komponentenumfangs und der Requisiten -Datenübertragungsbeispiele für den neunten Artikel von VueJS, der Ihnen vom Editor 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!