Динамические компоненты с функциями render
Переключение компонентов по типу, разрешение компонентов и сохранение слотов в функциях render
«Динамические компоненты с функциями render» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Динамические компоненты в функциях рендеринга
В шаблонах для замены компонентов во время выполнения используется <component :is="...">. В функции рендеринга того же результата можно добиться с помощью вспомогательных функций разрешения и h.
resolveComponent
resolveComponent ищет глобально или локально зарегистрированный компонент по его зарегистрированному имени и возвращает его для использования с h.
import { h, resolveComponent } from "vue";
export default {
render() {
const Btn = resolveComponent("MyButton");
return h(Btn, null, () => "Click");
}
};resolveDynamicComponent
Если целью может быть зарегистрированное имя, тег HTML или объект компонента, используйте resolveDynamicComponent. Эта функция обрабатывает все три случая.
import { h, resolveDynamicComponent } from "vue";
h(resolveDynamicComponent(props.type));Определение типа через свойства
Передавайте имя компонента через свойство и разрешайте его при каждом рендеринге. Это эквивалент :is для функции рендеринга.
export default {
props: { type: String },
render() {
const Comp = resolveDynamicComponent(this.type);
return h(Comp, { msg: "hi" });
}
};Передача свойств дальше
Разверните входящие атрибуты на разрешенном компоненте, чтобы динамический дочерний компонент получил всё, что передал ему родительский.
setup(props, { attrs }) {
return () => h(
resolveDynamicComponent(props.type),
{ ...attrs }
);
}Передача слотов дальше
Слоты передаются дочернему компоненту через третий аргумент h. Передайте объект слотов родителя напрямую, чтобы динамический компонент отрисовал их.
setup(props, { slots }) {
return () => h(
resolveDynamicComponent(props.type),
null,
slots
);
}Повторно используемый рендерер
Совместная передача атрибутов и слотов создает тонкую оболочку, которая отрисовывает любой компонент по имени, передавая ему все полученные данные.
setup(props, { attrs, slots }) {
return () => h(
resolveDynamicComponent(props.is),
attrs,
slots
);
}Динамические рендереры столбцов
Таблицы данных часто позволяют каждому столбцу указывать собственный компонент-рендерер. Сохраните имя компонента для каждого столбца и разрешайте его для каждой ячейки.
const columns = [
{ field: "name", renderer: "TextCell" },
{ field: "price", renderer: "MoneyCell" }
];Динамическая отрисовка ячеек
Для каждого столбца разрешите его рендерер и передайте значение ячейки как свойство. Один цикл управляет ячейками разных типов.
render() {
return h("tr", null,
columns.map((col) =>
h("td", null, [
h(resolveDynamicComponent(col.renderer), {
value: this.row[col.field]
})
])
)
);
}Резервный вариант в виде тега
Если resolveDynamicComponent получает незарегистрированное имя, она воспринимает его как строку нативного элемента, поэтому "div" безопасно отрисовывается как настоящий div.
h(resolveDynamicComponent("div"), { class: "box" }, "fallback");Зачем здесь нужны функции рендеринга
Функции рендеринга особенно полезны, когда структура вычисляется: например, когда количество дочерних элементов меняется, тип компонента зависит от элемента или логика потребовала бы множества вложенных условных конструкций шаблона.
Быстрая проверка
Какая вспомогательная функция безопасно разрешает цель, которой может быть имя компонента OR нативный тег HTML?
Итоги
Используйте resolveComponent для зарегистрированных имен и resolveDynamicComponent, когда целью также могут быть тег HTML или объект компонента. Передавайте attrs как свойства, а объект slots — как третий аргумент h. Этот шаблон лежит в основе динамических рендереров столбцов таблиц и гибких оболочек.
Часто задаваемые вопросы
Урок «Динамические компоненты с функциями render» бесплатный?
Да — полный текст урока «Динамические компоненты с функциями render» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Динамические компоненты с функциями render»?
Переключение компонентов по типу, разрешение компонентов и сохранение слотов в функциях render Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Динамические компоненты с функциями render»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Подробный разбор функции h()
- JSX во Vue 3 с Vite
- Динамические компоненты с функциями render
- Шаблон компонентов высшего порядка (HOC)