Hier ist eine kostenlose Übersetzung des Artikels " 10 Tipps und Tricks, um Sie zu einem besseren VueJS-Entwickler zu machen " von Dev.to. Der Autor informiert uns über interessante und nützliche Optionen für die Verwendung der üblichen VueJS-Tools.
Einführung
Ich arbeite sehr gerne mit VueJS und jedes Mal, wenn ich das mache, tauche ich tiefer in seine Fähigkeiten und Funktionen ein. In diesem Artikel präsentiere ich Ihnen 10 coole Tipps und Tricks, die Sie wahrscheinlich nicht kannten, und werde versuchen, Ihnen zu helfen, der beste Entwickler auf VueJS zu werden.
Lassen Sie uns die Syntax der Slots schön machen
Mit der Veröffentlichung von Vue 2.6 wurden Abkürzungen für Slots verfügbar, die als Ereignisse (z. B. die Abkürzung @click für v-on:click ) oder als Doppelpunkt für die Datenbindung ( :src ) verwendet werden können. Wenn Sie beispielsweise eine Tabellenkomponente haben, können Sie die folgende Funktion verwenden :
<template> ... <my-table> <template #row="{ item }"> /* some content here. You can freely use 'item' here */ </template> </my-table> ... </template>
$ on ('hook:')
Dies ist eine coole Funktion, die Sie verwenden können, wenn Sie einen benutzerdefinierten Ereignis-Listener oder ein Plugin eines Drittanbieters in den created oder beforeDestroy Hooks definieren und diese im beforeDestroy Hook entfernen beforeDestroy , um Speicherlecks zu vermeiden. Mit $on('hook:') Sie ein Ereignis in nur einem Hook definieren oder entfernen.
mounted() { const aThirdPartyPlugin = aThirdPartyPlugin() this.$on('hook:beforeDestroy', () => { aThirdPartyPlugin.destroy() }) }
Validierungsrequisiten
Vielleicht wissen Sie bereits, dass es möglich ist, Ihre Requisiten mit primitiven Werten wie String , Number oder Object zu validieren. Sie können jedoch auch einen benutzerdefinierten Validator erstellen, um beispielsweise ein Array von Zeichenfolgen zu überprüfen:
alertType: { validator: value => ['signup', 'login', 'logout'].includes(value) }
Dynamische Direktivenargumente
Eine der coolsten Funktionen von VueJS 2.6 ist die Möglichkeit, Argumente für Komponentenanweisungen dynamisch zu bestimmen. Angenommen, Sie haben eine Schaltflächenkomponente und möchten unter bestimmten Bedingungen das Click Ereignis und in allen anderen Fällen das DoubleClick Ereignis abhören. Hier ist ein Fall, in dem eine solche Richtlinie nützlich sein könnte:
<template> ... <aButton @[someEvent]="handleSomeEvent()"/> ... </template> <script> ... data(){ return{ ... someEvent: someCondition ? "click" : "dblclick" } }, methods:{ handleSomeEvent(){ // handle some event } } ... </script>
Und was wirklich cool ist -> das ist, dass Sie diese Vorlage auf dynamische HTML-Attribute, Requisiten und vieles mehr anwenden können!
Wiederverwendung von Komponenten für ähnliche Routen
Manchmal haben Sie unterschiedliche Routen, die eine Reihe von Komponenten verwenden. Wenn Sie zwischen solchen Routen wechseln, wird die allgemeine Komponente standardmäßig nicht neu gezeichnet, da Vue diese Komponente für eine bessere Leistung wiederverwendet. Wenn Sie diese Komponenten jedoch neu zeichnen möchten, können Sie die Eigenschaft :key in der Router-View-Component :
<template> <router-view :key="$route.fullPath"></router-view> </template>
Übergeben Sie alle Requisiten von der übergeordneten an die untergeordnete Komponente
Dies ist eine wirklich coole Funktion, um alle Requisiten von der übergeordneten Komponente an die untergeordnete Komponente weiterzugeben. Diese Methode ist praktisch, wenn Sie beispielsweise die Wrapper-Komponente verwenden. Anstatt alle Eigenschaften nacheinander zu übergeben, müssen Sie sie nur alle auf einmal übergeben:
<template> <childComponent v-bind="$props"/> </template>
Stattdessen:
<template> <childComponent :prop1="prop1" :prop2="prop2" :prop3="prop3" :prop4="prop4" ... /> </template>
Übergeben Sie alle Ereignis-Listener von der übergeordneten an die untergeordnete Komponente
Wenn Sie eine untergeordnete Komponente haben, die nicht root für die übergeordnete Komponente ist, können Sie alle Ereignis-Listener wie folgt von übergeordnet zu untergeordnet weitergeben:
<template> <div> ... <childComponent v-on="$listeners"/> ... </div> </template>
Wenn sich die untergeordnete Komponente im Stammverzeichnis des übergeordneten Elements befindet, benötigen Sie keinen solchen Trick, und alle Ereignisse sind standardmäßig verfügbar.
$ createElement
Jede Vue-Instanz hat standardmäßig Zugriff auf die $createElement , mit der virtuelle Knoten erstellt und zurückgegeben werden. Dies kann beispielsweise verwendet werden, um Markup in Methoden zu verwenden, die an die v-html Direktive übergeben werden können. In Funktionskomponenten steht diese Methode als erstes Argument für die render .
Verwenden von JSX
Ab Vue CLI 3 wird standardmäßig die JSX-Unterstützung angezeigt. Jetzt können Sie Ihren Code mit JSX schreiben (z. B. wenn Sie nach der Reaktion besser daran gewöhnt sind). Dies kann beispielsweise auch zum Schreiben von Funktionskomponenten praktischer sein. Wenn Sie Vue CLI 3 , können Sie JSX in Ihrem Projekt mit babel-plugin-transform-vue-jsx unterstützen.
Benutzerdefiniertes V-Modell
Standardmäßig ist v-model das, was wir syntaktischen Zucker über @input und :value Ereignissen nennen. Sie können jedoch die model in Ihrer Vue-Komponente angeben und festlegen, welches Ereignis und welche Requisiten verwendet werden sollen:
export default: { model: { event: 'change', prop: 'checked' } }
Fazit
Ich hoffe, ich konnte Ihnen einige Tipps geben, damit Sie der beste VueJS-Entwickler werden.