Vue.js: sloty vs. rekvizity

Měli byste pro své komponenty používat podpěry nebo sloty? Tady je můj názor na to.

Při vytváření součástí pomocí Vue.js můžete jít několika způsoby. Můžete jít s přístupem založeným na rekvizitách nebo si můžete vybrat řešení založené na slotech.

Pokud používáte rekvizity, věci se rychle vymknou z rukou, zejména když se zabýváte mnoha proměnnými a vlastními možnostmi. Pro ilustraci jsem vytvořil 2 verze komponenty aCustomButton. Jeden používá podpěry, druhý používá sloty.

Jak vypadá komponenta CustomButtonWithProps:

Jak vidíte, máte spoustu možností přizpůsobení komponenty viaprops. Můžete například zobrazit ikonu před textem, za textem změnit text tlačítka a barvu.

Takto používám tuto komponentu (v tomto příkladu ji používáme přímo v App.vue)

Jak vidíte, v App.vue máme pevně zabalenou komponentu. A to je skoro všechno, co vzhůru má přístup k rekvizitám.

Uvnitř samotné komponenty CustomButtonWithProps začíná být chaotický. Máme poměrně velkou složku, která je ve skutečnosti docela objemná. Můžeme jen říct, že chceme ukázat, že ikony nejsou. Bez přepsání komponenty však nemůžeme změnit samotnou ikonu. Totéž platí pro barvu. Můžeme změnit barvu, ale nemůžeme změnit velikost písma, font-dekorace atd.

To je místo, kde se podíváme na slotový přístup při psaní komponenty ve Vue.js. Jak uvidíte, tímto způsobem můžeme vytvořit mnohem flexibilnější komponentu.

Zde je komponenta CustomButtonWithSlots:

Zde vidíte, že komponenta je mnohem čistší než komponenta CustomButtonWithProps. Je to proto, že k tomu nemusíme předávat rekvizity. Každá proměnná věc, kterou vykreslujeme, nastavujeme v naší nadřazené komponentě. V tomto případě náš App.vue znovu:

Začnu nevýhodou implementace CustomButtonWithSlots tímto způsobem:

Vaše rodičovská komponenta se trochu nafoukne. Ale to je o tom. Odtud máme jen vzestupy.

  1. S tímto přístupem jsme mnohem flexibilnější: Můžeme nastavit libovolnou ikonu, kterou chceme v obou slotech, nemusíme předdefinovat žádné ikony v naší komponentě CustomButtonWithSlots. Díky tomu je součást mnohem více použitelná.
  2. Dokonce můžeme předat další komponenty do naší komponenty CustomButtonWithSlots. Řekněme, že máme komponentu Image / Icon, kterou chceme použít namísto výše uvedených ikon FontAwesome. Pak jednoduše předáme komponentu ve slotu ikon.
  3. Nemusíte se zabývat klauzulemi if-else uvnitř komponenty CustomButtonWithSlots. Buď předáte data, nebo ne. Není třeba kontrolovat, zda je tam nebo ne.
  4. V neposlední řadě: Vaše komponenta sama o sobě je mnohem čitelnější a méně matoucí.

Mějte na paměti, že se jedná o docela malý příklad. Ale čím větší jsou vaše komponenty, tím více matoucí jsou pro ostatní.

Neříkám, že rekvizity nikdy nedávají smysl, jsou tu z nějakého důvodu. U větších a flexibilnějších součástí však zvažte použití slotů na podpěrách.

Pokud své komponenty zapisujete pomocí slotů, poskytnete sobě a členům vašeho týmu mnohem větší flexibilitu a kód, který je snáze čitelný.