Gebäude “Und Das Alles In” Vue Komponenten

0
26

Da gibt es diese beliebte Analogie des Vue das geht wie folgt: Vue erhalten Sie, wenn Sie Reagieren und Winkel kommen zusammen und machen ein baby. Ich habe immer das teilte dieses Gefühl. Mit Vue ‘ s kleine Lernkurve, ist es kein Wunder, dass so viele Menschen es lieben. Seit Vue zu geben versucht der Entwickler macht über Komponenten und deren Umsetzung soweit wie es möglich ist, dieses Gefühl führte zu dem heutigen Thema.

Der Begriff und das alles in components bezieht sich auf Komponenten, die nicht dargestellt werden können, nichts. In diesem Artikel werden wir abdecken, wie Vue übernimmt die Darstellung einer Komponente.

Wir werden auch sehen, wie können wir die render() Funktion zu erstellen und das alles in Komponenten.

Möchten Sie vielleicht wissen, ein wenig über Vue zu bekommen, das meiste aus diesem Artikel. Wenn Sie ein Neuling Sarah Drasner ‘ s got your back. Die offizielle Dokumentation ist auch eine sehr gute Ressource.

Demystifying Wie Vue Rendert eine Komponente

Vue hat durchaus ein paar Möglichkeiten, eine Komponente definiert das markup. Es gibt:

  • Einzelne Datei-Komponenten, lassen Sie uns definieren, Komponenten und deren markup, wie würden wir eine normale HTML-Datei.
  • Die template-Komponente die Eigenschaft, die uns erlaubt, JavaScript zu verwenden, die Vorlage Literale zu definieren, die das markup für unsere Komponente.
  • Die el-Komponente Eigenschaft teilt Vue, um die Abfrage des DOM für ein markup zu verwenden als die Vorlage.

Sie haben wahrscheinlich gehört, die (möglicherweise eher ärgerlich): am Ende des Tages, Vue und alle seine Komponenten nur JavaScript. Ich konnte sehen, warum Sie denken vielleicht, dass die Aussage falsch ist, mit dem die Höhe von HTML und CSS schreiben wir. Fall und Punkt: einzelne Datei-Komponenten.

Mit der einzelnen Datei-Komponenten, definieren wir eine Vue-Komponente wie folgt:

<Vorlage>
<div class=”mood”>
{{ todayIsSunny ? ‘Freut mich’ : “Eh! Stört mich nicht,’}}
</div>
</template>

<script>
export default {
Daten: () => ({ todayIsSunny: true })
}
</script>

<style>
.Stimmung:after {
Inhalt: ‘&#x1f389;&#x1f389;’;
}
</style>

Wie können wir sagen, Vue “JavaScript” mit all dem Kauderwelsch oben? Aber, am Ende des Tages, es ist. Vue macht versuchen, machen es einfach für unsere Ansichten zum verwalten Ihrer Gestaltung und der sonstigen Vermögenswerte, sondern Vue nicht direkt zu tun, — er lässt es bis zu den build-Prozess, die wohl webpack.

Wenn webpack auf einen .vue-Datei, es werde führen Sie es durch eine Transformation Prozess. Während dieses Prozesses, der die CSS-Datei wird extrahiert aus der Komponente und in seine eigene Datei, und den restlichen Inhalt der Datei verwandelt und in JavaScript. So etwas wie dieses:

export default {
Vorlage: `
<div class=”mood”>
{{ todayIsSunny ? ‘Freut mich’ : “Eh! Stört mich nicht,’}}
</div>`,
Daten: () => ({ todayIsSunny: true })
}

Naja… nicht ganz das, was wir schon oben. Um zu verstehen, was als Nächstes passiert, wir müssen reden über die template-compiler.

Die Template-Compiler und die Render-Funktion

Dieser Teil der Vue-Komponente build-Prozess ist notwendig für das kompilieren und ausführen jedem Optimierung der Technik, Vue derzeit implementiert.

Wenn die Vorlage compiler trifft, diese:

{
template: `<div class=”mood”>…</div>`,
Daten: () => ({ todayIsSunny: true })
}

…es extrahiert die template-Eigenschaft und stellt seinen Inhalt in JavaScript. Eine render-Funktion wird dann Hinzugefügt, um das component object. Dieses render-Funktion wird im Gegenzug die Rückkehr der extrahierten template-Eigenschaft content, die umgewandelt wurde in JavaScript.

Dies ist, was die Vorlage oben Aussehen wird als render-Funktion:


render(h) {
return h(
‘div’,
{ class: ‘Stimmung’ },
diese.todayIsSunny ? ‘Freut mich’ : “Eh! Stört mich nicht’
)
}

Finden Sie die offizielle Dokumentation, um mehr zu erfahren über die render-Funktion.

Nun, wenn das component-Objekt übergeben bekommt, Vue, die render-Funktion der Komponente geht durch einige Optimierungen und wird zu einem VNode (virtuelle Knoten). VNode ist, was ging in snabbdom (die Bibliothek Vue verwendet intern zur Verwaltung der virtuellen DOM). Sarah Drasner macht einen guten job zu erklären, das “h” in der render-Funktion oben.

Ein VNode ist, wie Vue rendert Komponenten. Durch die Art und Weise, die render-Funktion erlaubt die Verwendung von JSX in Vue!

Wir müssen auch nicht warten, Vue, fügen Sie die render-Funktion für uns, wir definieren eine render-Funktion und es sollte Vorrang vor der el oder die template-Eigenschaft. Lesen Sie hier, um mehr über die render-Funktion und den Optionen.

Durch den Aufbau Ihrer Vue Komponenten mit Vue CLI oder einige benutzerdefinierte build-Prozess, die Sie nicht haben, importieren Sie den template-compiler, der kann aufblasen Ihre build-Datei-Größe. Ihre Komponenten sind auch bereits optimiert für eine brillante Leistung und sehr leichtgewichtiger JavaScript-Dateien.

So… Und Das Alles In Vue Komponenten

Wie ich bereits erwähnte, der Begriff und das alles in Komponenten : Komponenten, die nicht etwas Rendern. Warum würden wir wollen, dass Komponenten, die nicht etwas Rendern?

Wir können Kreide es bis zur Schaffung einer Abstraktion der gemeinsamen Komponente Funktionalität als eigene Komponente und Erweiterung der Sprach-Komponente zu erstellen, die besser und auch robuster Komponenten. Auch, S. O. L. I. D.

Nach dem Prinzip der Einzigen Verantwortung der S. O. L. I. D.:

Eine Klasse soll nur einen Zweck.

Wir können den port, über das Konzept in Vue Entwicklung, indem jede Komponente nur eine Verantwortung.

Sie können sein, wie Nicky und, “pff, ja ich weiß.” Okay, das ist sicher! Ihre Komponenten möglicherweise haben Sie den Namen “Passwort-Eingabe”, und es sicherlich macht eine Passwort-Eingabe. Das problem bei diesem Ansatz ist, dass, wenn Sie wiederverwenden möchten, diese Komponente in einem anderen Projekt, können Sie in der Komponente source so ändern Sie den Stil oder das markup zu halten, im Einklang mit dem neuen Projekt ‘ s style-guide.

Diese Pausen in der Regel von S. O. L. I. D., bekannt als die offen-geschlossen-Prinzip , welches besagt, dass:

Eine Klasse oder eine Komponente, in diesem Fall, sollte offen sein für Erweiterungen, aber geschlossen für änderungen.

Dies ist zu sagen, dass anstelle der Bearbeitung der Komponente Quelle, Sie sollten in der Lage sein, um es zu erweitern.

Seit Vue versteht, S. O. L. I. D.-Prinzipien, können Komponenten haben, Requisiten, events, slots und scoped slots was die Kommunikation und der ausbau einer Komponente ein Kinderspiel. Wir können dann bauen Komponenten, die alle Funktionen, ohne styling oder markup. Das ist wirklich toll für die re-usability und effizienten code.

Bauen Sie ein “Toggle” und das alles in Komponente

Dies wird einfach sein. Keine Notwendigkeit, eine Vue CLI-Projekt.

Das Umschalten der Komponente wird lassen Sie Umschalten zwischen auf-und aus-Zustände. Es werden außerdem Helfer, mit denen Sie das tun. Es ist nützlich für den Aufbau von Komponenten wie, gut, on/off Komponenten wie benutzerdefinierte Kontrollkästchen und alle Komponenten, die ein on/off-Status.

Lassen Sie uns schnell stub unsere Komponente: Kopf, um den JavaScript-Abschnitt in einem CodePen Stift und Folgen Sie entlang.

// toggle.js
const toggle = {
Requisiten: {
auf: { type: Boolean, default: false }
},
render() {
return []
},
Daten() {
return { currentState: dies.auf }
},
Methoden: {
setOn() {
diese.currentState = true
},
Aufrechnung() {
diese.currentState = false
},
toggle() {
diese.currentState = !diese.currentState
}
}
}

Das ist ziemlich minimal und noch nicht abgeschlossen. Es braucht eine Vorlage, und da wir nicht wollen, dass diese Komponente für die Darstellung von etwas, das wir haben, um sicherzustellen, es funktioniert mit jeder Komponente, die funktioniert.

Cue die slots!

Slots in Komponenten und das alles in

Slots ermöglichen es uns, Inhalte zwischen dem öffnenden und schließende tags von einer Vue-Komponente. Wie diese:

<toggle>
Dieser gesamte Bereich ist ein Ablagefach.
</toggle>

In Vue ‘ s eine einzige Datei-Komponenten, so könnten wir definieren einen slot:

<Vorlage>
<div>
<slot>
</div>
</template>

Naja, zu tun, dass die Verwendung von render () – Funktion können wir:

// toggle.js
render() {
return this.$slots.Standard
}

Wir können automatisch Sachen in unsere Knebel-Komponente. Keine Markierung, nichts.

Daten senden, bis der Baum mit Scoped Slots

In toggle.js wir hatten einige Länder und einige Hilfsfunktionen, die in das Methoden-Objekt. Es wäre schön, wenn wir könnten, geben die Entwickler den Zugang zu Ihnen. Wir sind derzeit mit slots und Sie lassen uns nicht aussetzen, alles von der untergeordneten Komponente.

Was wir wollen, ist scoped-slots. Gültigkeitsbereich slots funktionieren genauso wie slots, mit dem zusätzlichen Vorteil einer Komponente mit einem begrenzten Gültigkeitsbereich slot zu können aufzudecken die Daten ohne Ereignisse auslösen.

Wir können dies tun:

<toggle>
<div slot-scope=”{ auf }”>
{{ auf ? ‘On’ : ‘Off’ }}
</div>
</toggle>

Das slot-scope-Attribut können Sie auf die div ist de-Strukturierung ein Objekt ausgesetzt, die von der toggle-Komponente.

Geht zurück auf die render () – Funktion, die wir tun können:

render() {
return this.$scopedSlots.Standard({})
}

Dieses mal herum, wir sind dem Aufruf der default-Eigenschaft auf $scopedSlots-Objekt als eine Methode, weil scoped-slots sind Methoden, die ein argument. In diesem Fall wird der Methode der name ist Standard, da der Gültigkeitsbereich slot war nicht ein name gegeben und es ist der einzige scoped-slot vorhanden ist. Das argument, die wir übergeben, ein scoped-slot kann dann ausgesetzt werden, die aus der Komponente. In unserem Fall, wir setzen den aktuellen Stand der auf und den Helfern zu helfen, zu manipulieren den Zustand.

render() {
return this.$scopedSlots.Standard – ({
auf: diesem.currentState,
setOn: dies.setOn,
Aufrechnung: dies.Aufrechnung,
Umschalten: dies.Knebel,
})
}

Mit der Toggle-Komponente

Wir können dies tun, alle in CodePen. Hier ist, was wir bauen:

Finden Sie den Stift ZRaYWm von Samuel Oloruntoba (@kayandrae07) auf CodePen.

Hier ist das markup in Aktion:

<div id=”app”>
<toggle>
<div slot-scope=”{ on, setOn, Aufrechnung }” class=”container”>
<- Taste @click=”Klick(setOn)” class=”button”>Blaue Pille</button>
<- Taste @click=”Klick(Aufrechnung)” class=”button isRed”>Rote Pille</button>
<div v-if=”buttonPressed” class=”Meldung”>
<span v-if=”on”>Es ist alles nur ein Traum ist, gehen Sie zurück zu schlafen.</span>
<span v-else – >ich weiß nicht, wie weit die Kaninchen-Loch geht, ich bin kein Kaninchen, ich auch nicht Messen Löcher.</span>
</div>
</div>
</toggle>
</div>

  1. Erstens, wir sind die de-Strukturierung des Staates und Helfer aus dem scoped-slot.
  2. Dann, innerhalb des Gültigkeitsbereich-slot, haben wir zwei Schaltflächen, eine zum Umschalten der aktuelle Stand auf und die anderen ab.
  3. Die Klick-Methode ist nur dazu da, um sicherzustellen, es wurde eine Taste tatsächlich gedrückt, bevor wir ein Ergebnis anzeigen. Sie können sich die click-Methode weiter unten.

neue Vue({
el: ‘#app’,
components: { Umschalten },
Daten: {
buttonPressed: false,
},
Methoden: {
klicken Sie auf(fn) {
diese.buttonPressed = true
fn()
},
},
})

Wir passieren noch Requisiten und auslösen von Ereignissen aus der Toggle-Komponente. Mit einem Gültigkeitsbereich slot ändert sich nichts.

neue Vue({
el: ‘#app’,
components: { Umschalten },
Daten: {
buttonPressed: false,
},
Methoden: {
klicken Sie auf(fn) {
diese.buttonPressed = true
fn()
},
},
})

Dies ist ein einfaches Beispiel, aber wir können sehen, wie mächtig diese bekommen kann, wenn wir anfangen, die Komponenten wie ein date-picker oder ein autocomplete widget. Wir können die Wiederverwendung dieser Komponenten in mehreren Projekten, ohne sich sorgen über die lästigen stylesheets in die Quere.

Eine weitere Sache, die wir tun können, ist, setzen Sie die Attribute, die benötigt werden für die Erreichbarkeit aus dem scoped-slot und auch keine sorgen machen, dass du Komponenten, die Sie erweitern diese Komponente zugänglich.

In Der Zusammenfassung

  • Eine Komponente ist die render-Funktion ist unglaublich mächtig.
  • Bauen Sie Ihre Vue-Komponenten für eine schnellere Ausführung.
  • Komponente el -, template-oder sogar nur eine einzige Datei, die alle Komponenten erhalten Sie zusammengestellt in render-Funktionen.
  • Versuchen Sie, bauen Sie kleinere Komponenten weitere wiederverwendbare code.
  • Ihr code muss nicht sein, S. O. L. I. D., aber es ist eine verdammt gute Methode, um code durch.

Quellen

  • Demystifying Vue.js Interna
  • Vue-Komponente slots
  • Der Trick, um das Verständnis Gültigkeitsbereich Ablagefächer in Vue.js von Adam Wathan
  • Und das alles in Komponenten in Vue.js von Adam Wathan
  • WIP: eine Sammlung und das alles in Vue Komponenten von Samuel Oloruntoba