Vue Academy · Lekcja

Dynamiczne komponenty z funkcjami render

Przełączanie komponentów według typu, rozwiązywanie komponentów oraz zachowywanie slotów w funkcjach render.

Dynamiczne komponenty z funkcjami render to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dynamiczne komponenty w funkcjach renderujących

Szablony używają <component :is="..."> do zamiany komponentów w czasie działania aplikacji. W funkcji renderującej osiąga się ten sam efekt za pomocą helperów resolve i h.

resolveComponent

resolveComponent wyszukuje globalnie lub lokalnie zarejestrowany komponent na podstawie jego zarejestrowanej nazwy i zwraca go do użycia z h.

import { h, resolveComponent } from "vue";

export default {
  render() {
    const Btn = resolveComponent("MyButton");
    return h(Btn, null, () => "Click");
  }
};

resolveDynamicComponent

Jeśli celem może być zarejestrowana nazwa, tag HTML lub obiekt komponentu, należy użyć resolveDynamicComponent. Obsługuje on wszystkie trzy przypadki.

import { h, resolveDynamicComponent } from "vue";

h(resolveDynamicComponent(props.type));

Określanie type na podstawie propsów

Należy przekazać nazwę komponentu przez propa i rozwiązywać ją przy każdym renderowaniu. Jest to odpowiednik :is w funkcji renderującej.

export default {
  props: { type: String },
  render() {
    const Comp = resolveDynamicComponent(this.type);
    return h(Comp, { msg: "hi" });
  }
};

Przekazywanie propsów

Należy rozwinąć przychodzące atrybuty na rozwiązanym komponencie, aby dynamiczne dziecko otrzymało wszystko, co przekazano rodzicowi.

setup(props, { attrs }) {
  return () => h(
    resolveDynamicComponent(props.type),
    { ...attrs }
  );
}

Przekazywanie slotów

Sloty docierają do dziecka przez trzeci argument funkcji h. Należy bezpośrednio przekazać obiekt slotów rodzica, aby dynamiczny komponent mógł je wyrenderować.

setup(props, { slots }) {
  return () => h(
    resolveDynamicComponent(props.type),
    null,
    slots
  );
}

Wielokrotnego użytku renderer

Połączenie przekazywania atrybutów i slotów tworzy cienki wrapper, który renderuje dowolny komponent na podstawie nazwy, przekazując wszystkie dane dalej.

setup(props, { attrs, slots }) {
  return () => h(
    resolveDynamicComponent(props.is),
    attrs,
    slots
  );
}

Dynamiczne renderery kolumn

Tabele danych często pozwalają określić osobny komponent renderujący dla każdej kolumny. Należy przechowywać nazwę komponentu przy każdej kolumnie i rozwiązywać ją dla każdej komórki.

const columns = [
  { field: "name", renderer: "TextCell" },
  { field: "price", renderer: "MoneyCell" }
];

Dynamiczne renderowanie komórek

Dla każdej kolumny należy rozwiązać jej renderer i przekazać wartość komórki jako prop. Jedna pętla obsługuje różne typy komórek.

render() {
  return h("tr", null,
    columns.map((col) =>
      h("td", null, [
        h(resolveDynamicComponent(col.renderer), {
          value: this.row[col.field]
        })
      ])
    )
  );
}

Powrót do tagu

Jeśli resolveDynamicComponent otrzyma niezarejestrowaną nazwę, potraktuje ją jako ciąg znaków oznaczający natywny element, więc "div" bezpiecznie wyrenderuje prawdziwy element div.

h(resolveDynamicComponent("div"), { class: "box" }, "fallback");

Dlaczego warto używać funkcji renderujących

Funkcje renderujące sprawdzają się, gdy struktura jest obliczana dynamicznie — na przykład przy zmiennej liczbie elementów potomnych, różnych typach komponentów dla poszczególnych elementów lub logice wymagającej wielu zagnieżdżonych warunków w szablonie.

Szybki test

Który helper bezpiecznie rozwiązuje cel, którym może być nazwa komponentu LUB natywny tag HTML?

Podsumowanie

Należy używać resolveComponent dla zarejestrowanych nazw oraz resolveDynamicComponent, gdy celem może być także tag HTML lub obiekt komponentu. Atrybuty attrs należy przekazać jako propsy, a obiekt slots jako trzeci argument h. Ten wzorzec służy do tworzenia dynamicznych rendererów kolumn tabel i elastycznych wrapperów.

Często zadawane pytania

Czy lekcja „Dynamiczne komponenty z funkcjami render” jest bezpłatna?

Tak — pełny tekst „Dynamiczne komponenty z funkcjami render” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Dynamiczne komponenty z funkcjami render”?

Przełączanie komponentów według typu, rozwiązywanie komponentów oraz zachowywanie slotów w funkcjach render. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Dynamiczne komponenty z funkcjami render”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Dogłębne omówienie funkcji h()
JSX w Vue 3 z Vite
Dynamiczne komponenty z funkcjami render
Wzorzec komponentów wyższego rzędu (HOC)

← Powrót do Vue Academy