1

В структуре проекта есть каталог с компонентами, каждый хранит свой SVG код. Есть независимый компонент блока, в который через props приходят данные. Как динамически подключать нужный компонент с иконкой (должно быть 5 блоков, для каждого своя SVG (компонент vue))? Подумал про слоты, но ведь в них можно передать только контент или нет?

<template lang="pug">
  section.feautures
    .features__row
      info-block(v-for="i in 4")
        star-icon(slot="icon", fill="#876543", width="24px", height="24px")
</template>

1 ответ 1

0

TL;DR: <component :is="componentName"></component>
Документация: динамическое переключение компонентов

Иногда бывает полезно динамически переключаться между компонентами, например в интерфейсе с вкладками:

Показанное выше стало возможным с помощью элемента Vue <component> со специальным атрибутом is:

<!-- Компонент меняется при изменении currentTabComponent -->
<component :is="currentTabComponent"></component>

В примере выше currentTabComponent может содержать:

  • имя зарегистрированного компонента, или
  • объект с настройками компонента

Посмотрите этот fiddle чтобы поэкспериментировать с полным кодом, или эту версию для примера привязки к объекту с настройками компонента вместо указания его имени.

Дополнительная информация доступна в разделе документации Динамическим & Асинхронным компонентам.


не придумал ничего лучше чем просто скопировать раздел документации...

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.