Динамічні компоненти у Vue.js
Що таке Динамічні Компоненти?
Динамічні компоненти дозволяють перемикатися між різними компонентами в одній точці монтування, використовуючи вбудований елемент <component> з атрибутом :is.
Основне Використання
vue
<script setup>
import { ref, shallowRef } from 'vue'
import TabHome from './TabHome.vue'
import TabSettings from './TabSettings.vue'
import TabProfile from './TabProfile.vue'
const tabs = { home: TabHome, settings: TabSettings, profile: TabProfile }
const currentTab = shallowRef(TabHome)
</script>
<template>
<div class="tabs">
<button
v-for="(comp, name) in tabs"
:key="name"
:class="{ active: currentTab === comp }"
@click="currentTab = comp"
>
{{ name }}
</button>
</div>
<component :is="currentTab" />
</template>З Іменами У Формі Рядка
vue
<script setup>
import { ref } from 'vue'
// Компоненти повинні бути зареєстровані глобально або локально
const currentView = ref('HomeView')
</script>
<template>
<component :is="currentView" />
</template>З KeepAlive
Зберігайте стан при перемиканні між динамічними компонентами:
vue
<template>
<KeepAlive>
<component :is="currentTab" />
</KeepAlive>
</template>Передача Пропсів та Подій
vue
<template>
<component
:is="currentComponent"
:title="title"
:data="componentData"
@submit="handleSubmit"
@close="handleClose"
/>
</template>Практичний Приклад: Конструктор Форм
vue
<script setup>
import { shallowRef } from 'vue'
import TextInput from './TextInput.vue'
import SelectInput from './SelectInput.vue'
import CheckboxInput from './CheckboxInput.vue'
import TextareaInput from './TextareaInput.vue'
const fieldComponents: Record<string, any> = {
text: TextInput,
select: SelectInput,
checkbox: CheckboxInput,
textarea: TextareaInput,
}
const formFields = [
{ type: 'text', name: 'name', label: 'Ім'я' },
{ type: 'select', name: 'role', label: 'Роль', options: ['Адміністратор', 'Користувач'] },
{ type: 'checkbox', name: 'active', label: 'Активний' },
{ type: 'textarea', name: 'bio', label: 'Біографія' },
]
</script>
<template>
<form>
<div v-for="field in formFields" :key="field.name">
<component
:is="fieldComponents[field.type]"
:label="field.label"
:name="field.name"
v-bind="field"
/>
</div>
</form>
</template>HTML Елементи Як Динамічні Компоненти
vue
<script setup>
const tag = ref('h1')
</script>
<template>
<!-- Рендериться як <h1>, <h2>, <p> тощо -->
<component :is="tag">Динамічний Заголовок</component>
</template>shallowRef для Компонентів
typescript
// ✅ Використовуйте shallowRef для посилань на компоненти
const currentComponent = shallowRef(TabHome)
// ❌ Не використовуйте ref — це робить компонент глибоко реактивним (необхідно)
const currentComponent = ref(TabHome) // Непотрібна глибока реактивністьВажливо:
Динамічні компоненти з <component :is="..."> дозволяють вам перемикати компоненти в одній точці монтування. Використовуйте shallowRef для зберігання посилань на компоненти. Поєднуйте з <KeepAlive>, щоб зберегти стан. Загальні випадки використання: вкладки, конструктори форм, системи плагінів та рендеринг різних компонентів на основі даних.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.