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.
Verwendungskomponenten
registrieren
Wie bereits erwähnt, können wir einen Komponentenkonstruktor mit vue.extend () erstellen:
var mycomponent = vue.extend ({// Optionen ...})Um diesen Konstruktor als Komponente zu verwenden, müssen Sie sich bei `vue.comPonent (Tag, Konstruktor)` ** registrieren:
// Global registrieren die Komponente, das Tag ist my-componentvue.comPonent ('my-component', myComponent)<p> vue.js schreibt die W3C -Regel (Kleinbuchstaben und einen kurzen Balken) nicht für benutzerdefinierte Tag -Namen vor, obwohl es besser ist, diese Regel zu befolgen.
Nach der Registrierung der Komponente kann sie im Modul der übergeordneten Instanz als benutzerdefiniertes Element <My-Component> verwendet werden. Um sicherzustellen, dass die Komponente vor der Initialisierung der Stamminstanz registriert ist:
<div id = "exitle"> <my-component> </my-component> </div> // Definieren Sie var mycomponent = vue.extend ({Vorlage: '<div> Eine benutzerdefinierte Komponente!Gerendert als:
<div id = "Beispiel"> <div> Eine benutzerdefinierte Komponente! </div> </div>
Beachten Sie, dass die Vorlage der Komponente das benutzerdefinierte Element ersetzt und die Funktion des benutzerdefinierten Elements nur als Mountspunkt ist. Sie können die Instanzoption ersetzen, um zu entscheiden, ob sie ersetzt werden soll.
Lokale Registrierung
Es ist nicht erforderlich, jede Komponente weltweit zu registrieren. Es kann nur in anderen Komponenten verwendet werden. Registrieren Sie sich bei den Instanzoptionskomponenten:
var child = vue.extend ({ / * ... * /}) var parent = vue.extend ({Vorlage: '...', Komponenten: {// <my-component> Kann nur in der übergeordneten Komponentenvorlage 'my-component': child}} verwendet werden)Diese Einkapselung eignet sich auch für andere Ressourcen wie Anweisungen, Filter und Übergänge.
Registrieren Sie syntaktischen Zucker
Um das Ereignis einfacher zu machen, können Sie das Optionsobjekt direkt anstelle des Konstruktors an die Optionen vue.comPonent () und Komponenten übergeben. Vue.js ruft automatisch Vue.extend () hinter dem Rücken auf:
// Erweitern und registrieren Sie Vue.comPonent ('my-component', {Vorlage: '<Div> Eine benutzerdefinierte Komponente!Komponentenoptionen Probleme
Die meisten Optionen, die in den Vue -Konstruktor übergeben werden, können auch in Vue.extend () verwendet werden, aber es gibt zwei spezielle Fälle: Daten und EL. Stellen Sie sich vor, wir übergeben einfach ein Objekt als Datenoption an vue.extend ():
var data = {a: 1} var mycomponent = vue.extend ({data: data})Das Problem dabei ist, dass alle Instanzen von MyComponent dasselbe "Data" -Objekt teilen! Dies ist im Grunde nicht das, was wir wollen. Daher sollten wir eine Funktion als "Daten" verwenden, um ein neues Objekt zurückzugeben:
var mycomponent = vue.extend ({data: function () {return {a: 1}}})In ähnlicher Weise muss die Option "el" auch eine Funktion sein, wenn sie in `vue.extend ()` verwendet wird.
Vorlagenanalyse
Die Vue -Vorlage ist eine DOM -Vorlage, die einen nativen Browser -Parser verwendet, anstatt eine für sich selbst zu implementieren. Im Vergleich zu String -Vorlagen haben DOM -Vorlagen einige Vorteile, es gibt jedoch Probleme, und es muss ein gültiges HTML -Snippet sein. Einige HTML -Elemente haben Einschränkungen, welche Elemente darin platziert werden können. Häufige Einschränkungen:
• A kann nicht andere interaktive Elemente enthalten (z. B. Schaltflächen, Links)
• UL und OL können nur direkt Li einbeziehen
• Select kann nur Option und Optgroup enthalten
• Die Tabelle kann nur direkt Kopf, Tbody, Tfoot, TR, Caption, Col, Colgroup enthalten
• TR kann nur TH und TD direkt einbeziehen
In der Praxis können diese Einschränkungen zu unerwarteten Ergebnissen führen. Obwohl es in einfachen Fällen funktioniert, können Sie sich nicht auf benutzerdefinierte Komponenten verlassen, um die Ergebnisse vor der Browservalidierung zu erweitern. Beispielsweise ist <my-Select> <option> ... </option> </my-select> keine gültige Vorlage, auch wenn die My-Select-Komponente zu <Select> ... </select> expandiert.
Ein weiteres Ergebnis ist, dass benutzerdefinierte Tags (einschließlich benutzerdefinierter Elemente und spezielle Tags wie <komponenten>, <semplate>, <partial>) nicht in Tags verwendet werden können, die Einschränkungen für interne Elemente wie UL, Auswahl, Tabelle usw. haben. Benutzerdefinierte Tags, die in diese Elemente platziert sind, werden außerhalb des Elements erwähnt und werden so falsch gemacht.
Für benutzerdefinierte Elemente sollte das IS -Attribut verwendet werden:
<table> <tr is = "my-component"> </tr> </table>
`` kann nicht in `` `` zu diesem Zeitpunkt verwendet werden, `` `
Es kann mehrere ``:
<table> <tbody v-for = "Element in Elementen"> <tr> sogar Zeile </tr> <tr> ungerade Zeile </tr> </tbody> </table>
Requisiten
Daten mithilfe von Requisiten übergeben
Der Umfang der Komponenteninstanzen ist verwaiste. Dies bedeutet, dass die Daten der übergeordneten Komponenten nicht direkt in der Vorlage der untergeordneten Komponente referenziert werden können und sollten. Sie können Requisiten verwenden, um Daten an untergeordnete Komponenten weiterzugeben.
"Prop" ist ein Feld von Komponentendaten, das voraussichtlich aus der übergeordneten Komponente weitergegeben wird. Die untergeordneten Komponenten müssen explizit Requisiten mit der Props -Option deklarieren:
VUE.COMPONENT ('Child', {// Requisiten -Requisiten deklarieren: ['msg'], // Prop kann in Vorlagen verwendet werden // Sie können `this.msg` verwenden, um die Vorlage festzulegen: '<span> {{{msg}} </span>'})Dann passieren Sie eine normale Zeichenfolge:
<Child msg = "Hallo!"> </Child>
Hump gegen horizontale Balken
HTML-Attribute sind unempfindlich. Wenn eine Requisite mit dem Kamelcase des Namensformulars als Funktion verwendet wird, muss sie in Kebab-Case konvertiert werden (kurze horizontale Linien getrennt):
Vue.comPonent ('child', {// camelcase in javascript requisis: ['myMessage'], Vorlage: '<span> {{MyMessage}} </span>'}) <!-Kebab-Case in html-> <child my-message = "Hallo!Dynamische Requisiten
Ähnlich wie bei der Verwendung von V-Bind zur Bindung von HTML-Attributen an einen Expression können Sie auch V-Binds verwenden, um dynamische Props an die Daten der übergeordneten Komponente zu binden. Wenn sich die Daten der übergeordneten Komponenten ändert, werden sie auch an die untergeordnete Komponente übertragen:
<Div> <Eingabe v-model = "parentmsg"> <br> <untergeordnetes V-Bind: my-message = "parentmsg"> </child> </div>
Die Verwendung der Abkürzungssyntax von "v-Bind" ist normalerweise einfacher:
<Child: my-message = "parentmsg"> </child>
Wörtliche Syntax gegen dynamische Syntax
Ein häufiger Fehler für Anfänger besteht darin, numerische Werte unter Verwendung der wörtlichen Syntax zu bestehen:
<!-bestanden eine Zeichenfolge "1"->
<comp SOMPOP = "1"> </comp>
Da es sich um eine buchstäbliche Stütze handelt, wird sein Wert in der String `" 1 "anstelle der tatsächlichen Zahl übergeben. Wenn Sie eine tatsächliche JavaScript -Nummer übergeben möchten, müssen Sie dynamische Syntax verwenden, damit der Wert als JavaScript -Ausdruck berechnet wird:
<!-Übergeben Sie die tatsächliche Nummer->
<comp: SOME-PROP = "1"> </comp>
Prop -Bindungstyp
Prop ist standardmäßig Einwegbindung: Wenn sich die Eigenschaften der übergeordneten Komponenten ändern, wird sie an die untergeordnete Komponente übergeben, aber nicht umgekehrt. Dies soll verhindern, dass die untergeordnete Komponente versehentlich den Status der übergeordneten Komponente ändert. Dies erschwert den Datenfluss der Anwendung. Es ist jedoch auch möglich, die bidirektionale oder alltägliche Bindung mit dem .SYNC- oder .once-Bindungsmodifikator explizit zu erzwingen:
Vergleichende Syntax:
<!-Standard ist Einwegbindung-> <Child: msg = "parentmsg"> </child> <!-bidirektionale Bindung-> <Child: msg.ync = "parentmsg"> </child> <!-Single Bindung-> <child: msg.once = "parentsg"> </child>
Die bidirektionale Bindung synchronisiert das MSG -Attribut der untergeordneten Komponente zurück an das Elternattribut der übergeordneten Komponente. Eine einzelne Bindung synchronisiert die Änderungen nach der Erstellung nicht.
Beachten Sie, dass, wenn Prop ein Objekt oder ein Array ist, mit Referenz übergeben wird. Durch das Ändern einer untergeordneten Komponente wird der Zustand der übergeordneten Komponente unabhängig vom verwendeten Bindungstyp beeinflusst.
Prop -Überprüfung
Komponenten können Überprüfungsanforderungen für Requisiten angeben. Dies ist nützlich, wenn Komponenten anderen gegeben werden, da diese Überprüfungsanforderungen die API der Komponente bilden, um sicherzustellen, dass andere die Komponente korrekt verwenden. Zu diesem Zeitpunkt ist der Wert von Requisiten ein Objekt, das Überprüfungsanforderungen enthält:
VUE.COMPONENT ('Beispiel', {Props: {// Basisart -Erkennung (`null` bedeutet, dass ein Typ OK ist) Propa: Nummer, // Mehrere Typen (1.0.21+) Propm: [String, Nummer], // Erforderlich und String Propb: {Typ: String, TRUE}, // NUMBER, MIT DEFAUFT VURTUMT: APRAULT VURGELN: Sollte von einer Funktion an Propd zurückgegeben werden: {Typ: Objekt, Standard: function () {return {msg: 'hello'}}}, // diese Prop als eine bowway-Bindung angeben // Wenn der Bindungstyp nicht korrekt ist, wird eine Warnung geworfen. Der Wert (neu in 1.0.12) // Konvertieren Sie den Wert vor dem Einstellen des Wertes PropG: {coerce: function (val) {return val + '' // den Wert in einen String}} konvertieren}, proph: {croscaTyp kann der folgende native Konstruktor sein:
• Zeichenfolge
•Nummer
• boolean
•Funktion
•Objekt
• Array
Der Typ kann auch ein benutzerdefinierter Konstruktor sein, der eine Instanzerkennung verwendet.
Wenn die Prop -Überprüfung fehlschlägt, weigert sich Vue, diesen Wert auf die untergeordnete Komponente zu setzen, und eine Warnung wird geworfen, wenn die Entwicklungsversion verwendet wird.
Eltern-Kind-Komponentenkommunikation
Elternverbindung
Eine untergeordnete Komponente kann damit auf seine übergeordnete Komponente zugreifen. $ Parent. Nachkommen der Wurzelinstanz können damit zu darauf zugreifen. $ Root. Die übergeordnete Komponente hat ein Array.
Obwohl auf jede Instanz in der übergeordneten Kette zugegriffen werden kann, sollten untergeordnete Komponenten vermeiden, sich direkt auf die Daten der übergeordneten Komponente zu stützen und zu versuchen, Requisiten zu verwenden, um Daten explizit zu übergeben. Außerdem ist es sehr schlecht, den Zustand der übergeordneten Komponente in einer untergeordneten Komponente zu ändern, da:
1. Dies ermöglicht es der übergeordneten Komponente, eng mit der untergeordneten Komponente verbunden zu sein.
2. Wenn Sie sich nur die übergeordnete Komponente ansehen, ist es schwierig, den Zustand der übergeordneten Komponente zu verstehen. Weil es von einer untergeordneten Komponente geändert werden kann! Im Idealfall kann nur die Komponente ihren Zustand selbst ändern.
Benutzerdefinierte Ereignisse
Die VUE -Instanz implementiert eine benutzerdefinierte Ereignisschnittstelle für die Kommunikation im Komponentenbaum. Dieses Ereignissystem ist unabhängig von nativen DOM -Ereignissen und verwendet es anders.
Jede VUE -Instanz ist ein Ereignisauslöser:
• Verwenden Sie $ on (), um auf Ereignisse zuzuhören.
• Verwenden Sie $ emit (), um ein Ereignis darauf auszulösen.
• Verwenden Sie $ Dispatch (), um Ereignisse zu verteilen, und die Ereignisse sprudeln entlang der übergeordneten Kette.
• Verwenden Sie $ Broadcast (), um Ereignisse zu übertragen, und die Ereignisse werden auf alle Nachkommen nach unten übertragen.
Im Gegensatz zum DOM -Ereignis stoppt das VUE -Ereignis die Blase automatisch, nachdem der erste Rückruf während des Blasenprozesses ausgelöst wurde, es sei denn, der Rückruf gibt explizit true zurück.
Einfaches Beispiel:
<!-Child-Komponenten-Vorlage-> <Template ID = "Child-Template"> <input v-model = "msg"> <schalttaste v-on: klick = "benachrichtigen"> Ereigniser Ereignis </button> </template> <!-übergeordnete Komponentenvorlage-> <Div ID = "Ereignisse-Exampe"> <p> <P> Messages: {{{{{{{{{messages | JSON}} </p> <kind> </child> </div> // Registrieren Sie die untergeordnete Komponente // Senden Sie die aktuelle Nachricht aus VUE.comPonent ('Child', {Vorlage: '#child-template', data: function () {return {msg: 'Hallo'}, Methodien: {{moting: function () {) {{itmsg ', {itmsg. this.msg) this.msg = ''}}}}) // Initialisieren Sie die übergeordnete Komponente // Drücken Sie das Ereignis in ein Array, wenn die Nachricht empfangen wird. `Dieser 'im Ereignisrückruf ist automatisch an die Instanz gebunden, an der es registriert ist. Messages.push (msg)}}})Verwenden Sie V-on, um benutzerdefinierte Ereignisse zu binden
Das obige Beispiel ist sehr gut, aber wir können nicht intuitiv sehen, wo das "child-msg" -Ereignis aus dem Code der übergeordneten Komponente stammt. Es wäre besser, wenn wir den Event -Handler erklären, bei dem Unterkomponenten in Vorlagen verwendet werden. Für diese Unterkomponenten können Sie V-on verwenden, um benutzerdefinierte Ereignisse zu hören:
<Child V-on: Child-Msg = "HandleIn"> </child>
Dies macht deutlich: Wenn die untergeordnete Komponente das "Child-MSG" -Event auslöst, wird die "Handle" -Methode der übergeordneten Komponente aufgerufen. Der gesamte Code, der den Status der übergeordneten Komponente beeinflusst, wird in der "Handle" -Methode der übergeordneten Komponente platziert. Die Kinderkomponente konzentriert sich nur auf das Auslöserereignis.
Subcomponent Index
Trotz Requisiten und Ereignissen ist es manchmal noch erforderlich, auf die untergeordneten Komponenten direkt in JavaScript zuzugreifen. Zu diesem Zweck können Sie V-REF verwenden, um eine Index-ID für die untergeordnete Komponente anzugeben. Zum Beispiel:
<div id = "parent"> <user-profile v-ref: profile> </user-profile> </div> var parent = new Vue ({el: '#parent'}) // Zugriff auf untergeordnete Komponenten var child = parent. $ refs.profileWenn V-Ref und V-für zusammen verwendet werden, ist REF ein Array oder Objekt, das entsprechende untergeordnete Komponenten enthält.
Verwenden Sie den Slot, um Inhalte zu verteilen
Bei der Verwendung von Komponenten müssen Sie sie häufig so kombinieren:
<APP> <App-Header> </App-Header> <App-Footer> </App-Footer> </App>
Beachten Sie zwei Punkte:
1. Die <APP> -Komponente weiß nicht, welcher Inhalt in seinem Mountspunkt sein wird. Der Inhalt des Mountspunkts wird durch die übergeordnete Komponente von <APP> bestimmt.
2. Die <APP> -Komponente hat wahrscheinlich eine eigene Vorlage.
Damit Komponenten kombiniert werden können, benötigen wir eine Möglichkeit, den Inhalt der übergeordneten Komponente mit der eigenen Vorlage der untergeordneten Komponente zu mischen. Diese Verarbeitung wird als Inhaltsverteilung (oder "Übersetzung" bezeichnet, wenn Sie mit Angular vertraut sind). Vue.js implementiert eine API für die Inhaltsverteilung, die sich auf den aktuellen Entwurf der Webkomponentenspezifikation bezieht und ein spezielles <Slot> -Element als Slot für den ursprünglichen Inhalt verwendet.
Umfang erstellen
Bevor wir in die API der Inhaltsverteilung eintauchen, klären wir zunächst den Umfang der Inhaltskompilierung. Angenommen, die Vorlage lautet:
<kindkomponente>
{{msg}}
</Kinderkomponente>
Sollte MSG an die Daten der übergeordneten Komponente oder an die an die untergeordneten Komponente gebundenen Daten gebunden werden? Die Antwort ist die übergeordnete Komponente. Der Komponentenbereich ist einfach:
Der Inhalt der übergeordneten Komponentenvorlage wird im Bereich der übergeordneten Komponente kompiliert. Der Inhalt der untergeordneten Komponentenvorlage wird im Bereich der untergeordneten Komponente kompiliert
Ein häufiger Fehler besteht darin, eine Richtlinie an die Eigenschaften/Methode einer untergeordneten Komponente innerhalb der übergeordneten Komponentenvorlage zu binden:
<!-Invalid->
<Kinderkomponenten v-show = "somechildProperty"> </kindkomponent>
Unter der Annahme, dass SomechildProperty eine Eigenschaft einer untergeordneten Komponente ist, funktioniert das obige Beispiel nicht wie erwartet. Die übergeordnete Komponentenvorlage sollte den Status der untergeordneten Komponente nicht kennen.
Wenn Sie Anweisungen in einer Unterkomponente an den Stammknoten einer Komponente binden möchten, sollten Sie dies in seiner Vorlage tun:
Vue.comPonent ('Child-Component', {// funktioniert, weil es in der richtigen Bereichsvorlage ist: '<div v-show = "somechildProperty"> child </div>', data: function () {return {somechildProperty: true}}})In ähnlicher Weise wird der Verteilungsinhalt im Bereich der übergeordneten Komponente zusammengestellt.
Einzelsteckplatz
Der Inhalt der übergeordneten Komponente wird verworfen, es sei denn, die untergeordnete Komponentenvorlage enthält <Slot>. Wenn die untergeordnete Komponentenvorlage nur einen Steckplatz ohne Eigenschaften hat, wird der gesamte Inhalt der übergeordneten Komponente eingefügt, wo der Schlitz ist, und ersetzen Sie.
Der Inhalt des <Slots -Tags wird als Rollback -Inhalt angesehen. Der Fallback -Inhalt wird im Rahmen der untergeordneten Komponente zusammengestellt, und der Fallback -Inhalt wird angezeigt, wenn das Hostelement leer ist und es keinen Inhalt für die Einfügung gibt.
Angenommen, die My-Component-Komponente hat die folgende Vorlage:
<Div> <h1> Dies ist meine Komponente! </slot> </div>
Übergeordnete Komponentenvorlage:
<my-component>
<p> Dies ist ein Originalinhalt </p>
<p> Dies ist ein mehr originaler Inhalt </p>
</my-component>
Rendering -Ergebnis:
<div> <h1> Dies ist meine Komponente!
Named Slot
Das Element <Slot> kann mit einem speziellen Feature -Namen konfiguriert werden, um das Verteilungsinhalt zu konfigurieren. Mehrere Slots können unterschiedliche Namen haben. Ein benannter Slot übereinstimmt Elemente im Inhaltsfragment, die das entsprechende Slot -Attribut haben.
Es kann immer noch einen anonymen Slot geben, der den Standard -Slot ist, als Fallback -Slot für die Anpassung von Inhaltsfragmenten, die nicht gefunden werden können. Ohne Standard -Slot werden diese unerreichten Inhaltsfragmente verworfen.
Nehmen wir beispielsweise an, wir haben eine Multi-Insertion-Komponente mit einer Vorlage wie:
<div> <slot name = "eins"> </slot> <Slot> </slot> <slot name = "two"> </slot> </div>
Übergeordnete Komponentenvorlage:
<Multi-Insertion> <P Slot = "eins"> ein </p> <p Slot = "zwei"> zwei </p> <p> Standard A </p> </multi-INSEERTION>
Das Rendering -Ergebnis ist:
<div> <p Slot = "eins"> ein </p> <p> Standard A </p> <p Slot = "zwei"> zwei </p> </div>
Die API der Inhaltsverteilung ist ein sehr nützlicher Mechanismus bei der Kombination von Komponenten.
Dynamische Komponenten
Mehrere Komponenten können denselben Mountspunkt verwenden und dann dynamisch zwischen ihnen wechseln. Verwenden Sie das reservierte <Komponenten> Element, um an seine IS -Eigenschaft dynamisch zu binden:
New Vue ({El: 'Body', Data: {CurrentView: 'Home'}, Komponenten: {Home: {/ * ... */}, Beiträge: {/ * ... */}, Archiv: {/ * ... */}}}) <component: is = "currentView"> <!Aufbewahren
Wenn die ausgeschaltete Komponente im Speicher gehalten wird, kann sie beibehalten oder neu geführt werden. Dazu können Sie einen Parameter für Keep-Alive-Richtlinie hinzufügen:
<Komponente: IS = "CurrentView" Keep-Alive>
<!-Inaktive Komponenten werden zwischengespeichert->
</component>
Haken aktivieren
Beim Schalten von Komponenten kann das Schneiden in Komponenten asynchrone Operationen erfordern, bevor sie in sie einschneiden. Um die Dauer des Komponentenschaltens zu steuern, fügen Sie der Schneidkomponente einen Aktivierungshaken hinzu:
VUE.COMPONENT ('ACTEIRATE-EXPAME', {ACTIVATE: FUNKTION (DEM) {var self = this loadDataAsync (Funktion (Daten) {self.somedata = data Done ()})}}})Beachten Sie, dass der Activate -Hook nur während der Umschaltung des dynamischen Komponenten oder beim Rendering der statischen Komponenten -Initialisierung wirkt und nicht in der manuellen Einfügung mit Instanzmethoden wirkt.
Übergangsmodus
Die Übergangsmodusfunktion wird verwendet, um anzugeben, wie zwei dynamische Komponenten übergehen.
Geben Sie standardmäßig reibungslos ein und lassen Sie den Übergang. Diese Funktion kann zwei weitere Modi angeben:
• In Out: Die neue Komponente überträgt sich zunächst in und nach Abschluss ihres Übergangs wird die aktuelle Komponente übergehen.
• Out-in: Die aktuelle Komponente überträgt zunächst und nach Abschluss ihres Übergangs übergeht die neue Komponente in den Prozess.
Beispiel:
<!-Verblassen zuerst und dann verblassen Sie in-> <component: is = "view" transition = "fade" transition-mode = "out-in"> </component> .fade transition {transition: opacity .3s leichte;}. Fade-Enter,.Verschiedenes
Komponenten und V-für
Benutzerdefinierte Komponenten können V-für direkt wie normale Elemente verwenden:
<my-component v-for = "item in items"> </my-component>
Daten können jedoch nicht an eine Komponente übergeben werden, da der Umfang der Komponente verwaist ist. Um Daten an Komponenten weiterzugeben, sollten Requisiten verwendet werden:
<My-Component
v-for = "Artikel in Elementen"
: item = "item"
: index = "$ index">
</my-component>
Der Grund, warum das Element nicht automatisch in die Komponente injiziert wird, ist, dass dies dazu führt, dass die Komponente fest an den aktuellen V-für gekoppelt ist. Erklären Sie ausdrücklich, woher die Daten stammen, und können an anderer Stelle für Komponenten wiederverwendet werden.
Schreiben wiederverwendbarer Komponenten
Beim Schreiben von Komponenten ist es vorteilhaft, sich daran zu erinnern, ob Komponenten wiederverwendet werden. Es gibt nichts mit der engen Kopplung von Einwegkomponenten an andere Komponenten zu tun, aber wiederverwendbare Komponenten sollten eine klare öffentliche Schnittstelle definieren.
Die Vue.js -Komponenten -API stammt aus drei Teilen: Prop, Ereignissen und Slot:
• Prop ermöglicht die externe Umgebung, Daten an Komponenten weiterzugeben.
• Ereignisse ermöglichen es Komponenten, Aktionen in der externen Umgebung auszulösen.
• Der Steckplatz ermöglicht es der externen Umgebung, Inhalte in die Ansichtsstruktur der Komponente einzulegen.
Unter Verwendung der Abkürzungssyntax von V-Bind und V-on ist die Einklebung der Vorlage klar und präzise:
<My-Component
: foo = "baz"
: bar = "qux"
@event-a = "dothis"
@event-b = "dothat">
<!-Inhalt->
<img slot = "icon" src = "...">
<P Slot = "Main-Text"> Hallo! </p>
</my-component>
Asynchrone Komponenten
In großen Anwendungen müssen wir die Anwendung möglicherweise in kleine Stücke aufteilen und sie nur bei Bedarf vom Server herunterladen. Um die Dinge zu erleichtern, ermöglicht Vue.js die Komponente als Fabrikfunktion, wodurch die Definition der Komponente dynamisch analysiert wird. Vue.js löst die Fabrikfunktion nur aus, wenn die Komponente gerendert werden muss, und zwischengespeichert das Ergebnis für die spätere Wiederholung. Zum Beispiel:
Vue.comPonent ('async-example', function (resolve, reject) {setTimeout (function () {Resolve ({Vorlage: '<div> Ich bin async! </Div>'})}, 1000)})Die Fabrikfunktion empfängt einen Rückruf von Resolve, der aufgerufen wird, wenn eine vom Server heruntergeladene Komponentendefinition empfangen wird. Sie können auch Reject (Grund) aufrufen, um anzuzeigen, dass das Laden fehlgeschlagen ist. Hier dient SetTimeout nur zur Demonstration. Es liegt ganz bei Ihnen, die Komponenten zu erhalten. Empfohlene Code -Segmentierungsfunktion mit WebPack:
VUE.COMPONENT ('ASYNC-Webpack- Example', Funktion (Resolve) {// Diese Syntax-Syntax teilt WebPack // den kompilierten Code automatisch in verschiedene Blöcke auf, // diese Blöcke werden automatisch über AJAX-Anforderung heruntergeladen. Erforderlich (['./ My-Aasync-Component'], Resolve)})})})})})}}).Ressourcennamenkonvention
Einige Ressourcen wie Komponenten und Richtlinien erscheinen in Vorlagen als HTML -Attribute oder HTML -benutzerdefinierte Elemente. Da die Namen von HTML-Attributen und Tagennamen nicht fallempfindlich sind, muss der Name der Ressource normalerweise die Form von Kebab-Case anstelle von Kamelcase verwenden, was nicht sehr bequem ist.
Vue.js unterstützt den Namen von Ressourcen in Form von Kamelcase oder Pascalcase und wandelt sie automatisch in die Vorlage in Kebab-Case um (ähnlich der Namenskonvention von Prop):
// In Komponentendefinitionskomponenten: {// MyComponent mit Kamelcase-Form: {/ *... */}} <!-Verwenden von Kebab-Case-Form in Vorlagen-> <my-component> </my-component> ES6-Objektliteralabkürzung ist auch fein: // pascalcaseimport textbox from './Component/tex- // Pascalcapoport textbox from' ./Component/texs/tex-box aus '. '.Rekursive Komponenten
Komponenten können sich in ihren Vorlagen rekursiv bezeichnen, jedoch nur, wenn es die Namensoption hat:
var stackoverflow = vue.extend ({name: 'stack-overflow', Vorlage: '<div>' + // nenne es rekursiv auf seinem eigenen '<stack-overflow> </stack-overflow>' + '</div>'})Die obige Komponente verursacht einen Fehler "Max -Stapelgröße überschritten". Stellen Sie daher sicher, dass der rekursive Anruf eine Kündigungsbedingung hat. Wenn eine Komponente weltweit mit Vue.comPonent () registriert ist, wird die Komponenten -ID automatisch auf die Namensoption der Komponente eingestellt.
Fragmentinstanz
Bei Verwendung der Vorlageoption ersetzt der Inhalt der Vorlage das Montendelement der Instanz. Daher sind die Elemente der obersten Ebene der empfohlenen Vorlage immer einzelne Elemente.
Schreiben Sie die Vorlage nicht so:
<Div> Wurzelknoten 1 </div>
<Div> Wurzelknoten 2 </div>
Es wird empfohlen, dies zu schreiben:
<div>
Ich habe einen einzelnen Stammknoten!
<Div> Knoten 1 </div>
<Div> Knoten 2 </div>
</div>
Die folgenden Situationen verwandeln die Instanz in eine fragmentierte Instanz:
1. Die Vorlage enthält mehrere Elemente der obersten Ebene.
2. Die Vorlage enthält nur normalen Text.
3. Die Vorlage enthält nur andere Komponenten (andere Komponenten können eine Fragmentinstanz sein).
4. Die Vorlage enthält nur eine Element-Anweisung, wie z.
5. Der Template Root Node verfügt über einen Prozesssteuerungsanweis, z. B. V-IF oder V-für.
Diese Fälle ermöglichen es der Instanz, eine unbekannte Anzahl von Elementen auf höchster Ebene zu haben, die ihren DOM-Inhalt als Fragment behandeln. Die Fragmentinstanz macht den Inhalt immer noch richtig. Es gibt jedoch keinen Stammknoten, sein $ el zeigt auf einen Ankerknoten, dh einen leeren Textknoten (ein Kommentarknoten im Entwicklungsmodus).
Noch wichtiger ist jedoch, dass Anweisungen für nicht prozessübergreifende Kontrollanweisungen, Nicht-Prop-Merkmale und Übergänge zu Komponentenelementen ignoriert werden, da kein Wurzelelement für die Bindung vorhanden ist:
<!-Nein, weil es kein Wurzelelement gibt->
<Beispiel v-show = "OK" transition = "fade"> </Beispiel>
<!-Requisiten Ja->
<Beispiel: prop = "somedata"> </Beispiel>
<!-Prozesskontrolle ist in Ordnung, aber es gibt keinen Übergang->
<Beispiel v-if = "OK"> </Beispiel>
Natürlich haben Fragmentinstanzen ihre Verwendung, aber es ist normalerweise besser, der Komponente einen Wurzelknoten zu geben. Es stellt sicher, dass die Anweisungen und die spezielle Leistung für Komponentenelemente korrekt konvertiert werden und die Leistung auch etwas besser ist.
Inline -Vorlagen
Wenn eine untergeordnete Komponente über die Inline-Template-Eigenschaft verfügt, behandelt die Komponente ihren Inhalt als Vorlage, anstatt sie als Verteilungsinhalt zu behandeln. Dies macht die Vorlage flexibler.
<My-Component Inline-Template>
<p> Diese werden als die eigene Vorlage der Komponente </p> kompiliert </p>
<p> Übersetzungsinhalt des Elternteils nicht. </p>
</my-component>
Inline-Template erschwert jedoch den Umfang der Vorlage und kann die Ergebnisse der Template-Kompilierung nicht zwischenspeichern. Eine Best Practice besteht darin, die Vorlageoption zu verwenden, um Vorlagen in einer Komponente zu definieren.
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Für Tutorials zu Vue.js -Komponenten klicken Sie bitte auf das spezielle Thema VUE.JS -Komponenten -Lern -Tutorial zum Erlernen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.