Vue.js: Slots vs. Requisiten

Sollten Sie Requisiten oder Steckplätze für Ihre Komponenten verwenden? Hier ist meine Meinung dazu.

Beim Erstellen von Komponenten mit Vue.js können Sie verschiedene Wege gehen. Sie können den auf Requisiten basierenden Ansatz wählen oder die auf Slots basierende Lösung wählen.

Wenn Sie Requisiten verwenden, können die Dinge schnell außer Kontrolle geraten, insbesondere wenn Sie mit vielen Variablen und benutzerdefinierten Optionen arbeiten. Um dies zu veranschaulichen, habe ich 2 Versionen einer CustomButton-Komponente erstellt. Einer benutzt Requisiten, der andere benutzt Slots.

So sieht die CustomButtonWithProps-Komponente aus:

Wie Sie sehen, haben Sie eine Reihe von Optionen, mit denen Sie die Komponenten-Viaprops anpassen können. Sie können beispielsweise ein Symbol vor dem Text anzeigen, nach dem Text den Schaltflächentext und die Farbe ändern.

So verwende ich diese Komponente (in diesem Beispiel wird sie direkt in App.vue verwendet)

Wie Sie sehen können, haben wir eine eng umschlossene Komponente in App.vue. Und das ist so ziemlich alles, was die Herangehensweise an Requisiten von Vorteil ist.

In der CustomButtonWithProps-Komponente selbst wird es langsam chaotisch. Wir haben eine ziemlich große Komponente, die eigentlich ziemlich sperrig ist. Wir können nur sagen, wir wollen zeigen, dass die Icons nicht sind. Das Symbol selbst kann jedoch nicht geändert werden, ohne die Komponente neu zu schreiben. Gleiches gilt für die Farbe. Wir können die Farbe ändern, aber wir können die Schriftgröße, die Schriftdekoration usw. nicht ändern.

Hier werfen wir einen Blick auf den Slot-Ansatz beim Schreiben einer Komponente in Vue.js. Wie Sie sehen werden, können wir auf diese Weise eine viel flexiblere Komponente erstellen.

Hier ist die CustomButtonWithSlots-Komponente:

Hier sehen Sie, dass die Komponente viel sauberer ist als die CustomButtonWithProps-Komponente. Das liegt daran, dass wir keine Requisiten übergeben müssen. Jede Variable, die wir rendern, setzen wir in unserer Elternkomponente. In diesem Fall nochmal unsere App.vue:

Ich beginne mit dem Nachteil der Implementierung von CustomButtonWithSlots auf folgende Weise:

Ihre Elternkomponente wird etwas aufgeblähter. Aber das war es schon. Von dort haben wir nur noch Upsides.

  1. Wir sind mit diesem Ansatz viel flexibler: Wir können in beiden Slots jedes gewünschte Symbol festlegen, und müssen in unserer CustomButtonWithSlots-Komponente keine Symbole vordefinieren. Das macht die Komponente viel wiederverwendbarer.
  2. Wir können sogar andere Komponenten an unsere CustomButtonWithSlots-Komponente übergeben. Angenommen, wir möchten anstelle der oben genannten FontAwesome-Symbole eine Bild- / Symbolkomponente verwenden. Dann übergeben wir die Komponente einfach in den Icon-Slot.
  3. Sie müssen sich nicht mit if-else-Klauseln in der CustomButtonWithSlots-Komponente befassen. Sie übergeben die Daten entweder oder nicht. Sie müssen nicht überprüfen, ob es da ist oder nicht.
  4. Last but not least: Ihre Komponente selbst ist viel lesbarer und weniger verwirrend.

Denken Sie daran, dass dies ein ziemlich kleines Beispiel ist. Aber je größer Ihre Komponenten werden, desto verwirrender werden sie für andere Menschen.

Ich sage nicht, dass Requisiten niemals Sinn ergeben, sie sind aus einem bestimmten Grund hier. Bei größeren und flexibleren Bauteilen sollten Sie jedoch die Verwendung von Steckplätzen über Requisiten in Betracht ziehen.

Wenn Sie Ihre Komponenten mit Slots schreiben, geben Sie sich und Ihren Teammitgliedern viel mehr Flexibilität und Code, der einfacher zu lesen ist.