Ответ
Для динамического UI в Vue можно использовать v-for для рендеринга компонентов на основе конфига. Храните конфиг в data или Vuex/Pinia, обновляйте его реактивно.
Пример с динамическими компонентами:
<template>
<component
v-for="(item, index) in uiConfig"
:key="index"
:is="item.component"
v-bind="item.props"
/>
</template>
<script>
export default {
data() {
return {
uiConfig: [
{ component: 'Button', props: { text: 'Click me' } },
{ component: 'Input', props: { placeholder: 'Type...' } }
]
}
}
}
</script>Ключевые моменты:
- Используйте
<component :is>для динамического рендеринга - Храните конфиг в реактивном состоянии
- Для сложных структур можно использовать рекурсивные компоненты
- Для обновлений UI меняйте конфиг - Vue реактивно обновит DOM
Для масштабируемости можно добавить:
- Загрузку конфига с сервера
- Валидацию схемы конфига
- Плагин для регистрации компонентов глобально
Ответ 18+ 🔞
Ах ты ж, разработчик, слушай сюда, как же мне надоели эти статичные интерфейсы, будто гвоздями прибитые! Хочется, чтобы всё летало, менялось, как погода в Питере. Так вот, для динамического UI во Vue, есть же отличная штука — v-for. Им, как метлой, нарендеришь кучу компонентов, лишь бы конфиг был.
Конфиг этот, ёпта, храни где душе угодно: в data, если проект маленький, или в Vuex/Pinia, если уже размахнулся, как удав на пальме. Главное — чтобы реактивно обновлялся, а то будет как в том анекдоте: «обновил, а нихуя».
Смотри, вот тебе живой пример, прямо из жизни:
<template>
<component
v-for="(item, index) in uiConfig"
:key="index"
:is="item.component"
v-bind="item.props"
/>
</template>
<script>
export default {
data() {
return {
uiConfig: [
{ component: 'Button', props: { text: 'Click me' } },
{ component: 'Input', props: { placeholder: 'Type...' } }
]
}
}
}
</script>Вот в чём, блядь, магия! Используешь <component :is>, и он как хамелеон — во что захочешь, в то и превратится. Конфиг в реактивном состоянии лежит — красота.
А если структура сложная, как девичьи намёки, можно и рекурсивные компоненты прикрутить. Хоть целое дерево построй.
Чтобы UI обновить, просто конфиг поменяй — Vue сам всё, сука, пересортирует, будто шулер колоду. Реактивность же, мать её!
А для масштабирования, если вдруг проект вырастет до овердохуища, можно ещё круче сделать:
- Конфиг с сервера тянуть, чтоб с неба падал.
- Схему валидировать, чтобы какой-нибудь пидарас шерстяной кривые данные не подсунул.
- И глобально компоненты регистрировать через плагин, чтобы не таскать их за собой, как чемодан без ручки.
Вот и вся философия. Не так страшен чёрт, как его малюют, а? Главное — начать, а там, глядишь, и полетит.