Was sind Komponenten?
Komponente ist eines der leistungsstärksten Merkmale von Vue.js. Komponenten können HTML -Elemente erweitern und wiederverwendbaren Code einkapseln. Auf einer höheren Ebene sind Komponenten benutzerdefinierte Elemente, und Vue.js 'Compiler fügt ihm besondere Funktionen hinzu. In einigen Fällen können Komponenten auch in Form von nativen HTML -Elementen erfolgen, die mit der IS -Funktion erweitert werden.
Slotverteilungsinhalt
① Übersicht:
Einfach ausgedrückt, wenn die übergeordnete Komponente einige DOMs in die untergeordnete Komponente einfügen muss, werden diese DOMs angezeigt, nicht angezeigt, wo sie angezeigt werden und wie sie angezeigt werden, was in der Verantwortung der Schlitzverteilung liegt.
② Standardmäßig
Der Inhalt der übergeordneten Komponente, die in der untergeordneten Komponente eingeschlossen ist, werden nicht angezeigt.
Zum Beispiel Code:
<div id = "app"> <kinds> <span> 12345 </span> <!-Die obige Zeile wird nicht angezeigt-> </children> </div> <script> var vm = neuer VUE ({el: '#app', Komponenten: {Kinder: {// Dies hat keinen Rückgaberwert, und die TABTE wird nicht verteilt. }); </script>Der Inhalt der Anzeige ist eine Schaltfläche, die den Inhalt im Span -Tag nicht enthält.
③Single Slot
Einfach ausgedrückt, wenn Sie dieses Tag nur verwenden, können Sie die übergeordnete Komponente in den Inhalt der untergeordneten Komponente platzieren und platzieren, damit sie angezeigt werden soll.
<div id = "app"> <kinds> <span> 12345 </span> <!-Die obige Zeile wird nicht angezeigt-> </children> </div> <script> var vm = neuer VUE ({el: '#app', Komponenten: {Kinder: {// Dies hat keinen Rückgaberwert, und das Vorsatz wird nicht verteilt. Taste -Tag </button> "}}}); </script>Wenn Sie dies beispielsweise schreiben, ist das Ergebnis:
<Staste> <span> 12345 </span> Um den Aktionsumfang zu klären, verwenden Sie das Schaltflächen -Tag </button>
Das heißt, der Inhalt der übergeordneten Komponente, die in der untergeordneten Komponente platziert ist, werden in die Position <Slot> </slot> der untergeordneten Komponente eingefügt.
Beachten Sie, dass selbst wenn es mehrere Tags gibt, sie zusammen eingefügt werden, was dem Austausch des <Stlot> </slot> -Tags durch das in der untergeordnete Komponente platzierte Tag entspricht.
④ Named Slot
Setzen Sie verschiedene HTML -Tags in Unterkomponenten an verschiedenen Stellen ein
Die übergeordnete Komponente fügt dem zu verteilenden Tag das Attribut für Slot = "Name" hinzu
Die untergeordnete Komponente fügt das Attribut name = "Name name" im Schlitz -Tag des entsprechenden Verteilungsortes hinzu und stellt das entsprechende Tag in den entsprechenden Speicherort.
Beispielcode:
<div id="app"> <children> <span slot="first">12345</span> <span slot="second">56789</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //This has no return value, and the template will not continue to be distributed: "<Staste> <slot name = 'first'> </slot> Um den Aktionsumfang zu verdeutlichen, verwenden Sie also das Schaltfläche </button>"}}}); </script>Das Ergebnis wird angezeigt als: (Um die Ansicht der Betrachtung zu betrachten, wurde die Leitungsunterbrechung manuell angepasst)
<button> <span slot = "First"> 12345 </span>, um den Aktionsumfang zu verdeutlichen, <span Slot = "zweite"> 56789 </span> Verwenden Sie also das Taste -Tag </button>
⑤Scope des Verteilungsinhalts:
Der Umfang des verteilten Inhalts wird basierend auf der Vorlage ermittelt, in der es sich befindet. Beispielsweise wird das obige Tag durch die Vorlage der übergeordneten Komponente gesteuert (obwohl es vom untergeordneten Tag der untergeordneten Komponente enthalten ist, aber da es nicht im Vorlagenattribut der untergeordneten Komponente ist, gehört es nicht zur untergeordneten Komponente), wird es von der übergeordneten Komponente gesteuert.
Beispielcode:
<div id = "app"> <chothers> <span slot = "first" @click = "tobeKnow"> 12345 </span> <span slot = "Second"> 56789 </span> <! Elternmethode ");}}, Komponenten: {Kinder: {// Dies hat keinen Rückgabewert, und die Vorlage wird weiterhin nicht verteilt:" <button> <slot name = 'First'> </slot>, um den Aktionsbereich zu klären, <Slot name = 'Second'> </slot> Verwenden Sie also das Button -Tag </button>}}}}. </script>Wenn der Textbereich 12345 geklickt wird (anstatt alle Schaltflächen), wird die Tobe -Know -Methode der übergeordneten Komponente ausgelöst.
Wenn Sie jedoch auf andere Bereiche klicken, gibt es keinen Einfluss.
Das offizielle Tutorial sagt Folgendes:
Der Inhalt der übergeordneten Komponentenvorlage wird im Bereich der übergeordneten Komponente kompiliert. Der Inhalt der untergeordneten Komponentenvorlage wird im Bereich der untergeordneten Komponente kompiliert
⑥ Tipps, wenn kein Inhalt verteilt ist:
Wenn die übergeordnete Komponente kein Tag in die untergeordnete Komponente aufstellt oder die übergeordnete Komponente ein Tag in die untergeordnete Komponente platziert, sondern über ein Slot -Attribut verfügt und die untergeordnete Komponente kein Tag für das Slot -Attribut hat.
Anschließend spielt das Schlitzetikett der Kinderkomponente keine Rolle.
Sofern im Steckplatz -Tag nicht Inhalt vorhanden ist, wird der Inhalt im Slot -Tag angezeigt, wenn kein Inhalt verteilt ist.
Wie im Beispielcode:
<div id = "app"> <Kinder> <span Slot = "First"> 【12345】 </span> <! name = 'zuerst'> <tasten> 【Wenn es keinen Inhalt gibt, wird mir 1】 </button> </slot> angezeigt, um den Aktionsumfang zu klären, <Slot name = 'last'> <button> 【Wenn es keinen Inhalt gibt, wird es 2】 </button> </slot> verwenden. Verwenden Sie also das Button -Tag </div>}}}). </script>
veranschaulichen:
【1】 Der Schlitzetikett mit name = 'first' wird durch das Tag entsprechend der übergeordneten Komponente ersetzt (der Inhalt innerhalb des Slot -Tags wird verworfen);
【2】 Das Slot -Tag von name = 'last', da es keinen entsprechenden Inhalt gibt, wird der Inhalt im Slot -Tag angezeigt.
⑦ Wenn Sie die Eigenschaften des Root -Tags des Unterkomponenten steuern möchten
[1] Da das Template -Tag zur übergeordneten Komponente gehört, ist es zunächst nicht möglich, die Anweisungen der untergeordneten Komponente an das Vorlagen -Tag zu binden (da es zur übergeordneten Komponente gehört).
[2] Wenn Sie steuern müssen, ob die untergeordnete Komponente (z. B. V-IF oder V-Show) über die übergeordnete Komponente angezeigt wird, gehört diese Anweisung offensichtlich zur übergeordneten Komponente (z. B. unter die Daten der übergeordneten Komponente). Tags können auf der Vorlage der untergeordneten Komponente geschrieben werden.
Als Code:
<div id = "app"> <button @click = "toShow"> klicken, um die untergeordnete Komponent-Anzeige </button> <chothers v-if = "abc"> </childhes> </div> <script> var vm = new VUE ({{el: '#App', Daten: {abc: false}, methods: {{{{{{{{{) {) {) {) {) {) {) {) {) {) {) {this.abc =! {// Dies hat keinen Rückgabewert, Vorlage: "<Div> Dies ist eine untergeordnete Komponente </div>"}}}); </script>veranschaulichen:
Steuern Sie, ob die untergeordnete Komponente über die übergeordnete Komponente angezeigt wird (klicken Sie auf die Schaltfläche, um den Wert der V-IF-Anweisung zu wechseln).
[3] Wenn Sie steuern müssen, ob die untergeordnete Komponente angezeigt wird (zum Beispiel ausblenden), gehört diese Anweisung offensichtlich zur untergeordneten Komponente (der Wert wird unter das Datenattribut der untergeordneten Komponente gestellt), dann kann er nicht wie oben geschrieben werden, sondern muss in das Stammbezeichnung der untergeordneten Komponente platziert werden.
<div id="app"> <button @click="toshow">Click to let the child component display</button> <children> <span slot="first">【12345】</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', methods: { toshow: function () { Dies. $ Kinder [0]. TOHIDDEN = True; this.tohidden =! this.tohidden;}}}}}}}); </script>veranschaulichen:
Wenn Sie auf eine untergeordnete Komponente klicken, verschwinden die untergeordnete Komponente.
Klicken Sie auf die Schaltfläche der übergeordneten Komponente, um die untergeordnete Komponente neu zu reduktionieren, indem Sie die tohidden Eigenschaft der untergeordneten Komponente ändern.
Die Anweisungen der untergeordneten Komponente sind an die Vorlage der untergeordneten Komponente gebunden (dies kann aufgerufen werden).
Das obige ist eine detaillierte Erläuterung des Beispiels für die Verteilung der Steckplätze für die vom Editor eingeführte 11. VueJS -Komponente. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!