Комментарии 21
Если бы этот компонент был описан с помощью стандартного шаблона, то содержал бы в себе до 6 условий v-if, описывающих разные уровни заголовков:
<h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-if="level === 2"> <slot></slot> </h2> <h3 v-if="level === 3"> <slot></slot> </h3> <h4 v-if="level === 4"> <slot></slot> </h4> <h5 v-if="level === 5"> <slot></slot> </h5> <h6 v-if="level === 6"> <slot></slot> </h6>
Как насчет:
<component :is="'h' + level"></component>
Кстати, далее вы показали хороший пример использования динамических компонентов.
+2
И тогда нужно было бы иметь компонент под каждый уровень заголовка, а не один компонент на все случаи :)
0
Последнее время всё чаще использую provide/inject, как раз именно потому что общение через vuex — очень уж громоздко получается, особенно если надо всего-то событие триггернуть.
0
НЛО прилетело и опубликовало эту надпись здесь
Используется в библиотеках зачастую, о чем в доке вью так и пишут. Например element-ui активно используется в компоненте формы чтобы все дочерние элементы имели доступ к компоненту формы.
0
Вопрос скорее задач, которые стоят. Личный текущий пример.
CRM, огромные формы. Данные тянутся со стора в виде нормализованных списков моделей.
Есть компонент, отвечающий за обработку данных на уровне модели, представляющей определенную сущность. Есть компонент, прокси-обертка, выводящая конкретное поле (обертка нужна, т.к. тип поля приходит с бэка). И ему необходима определенная информация из родительской формы.
Так вот этот компонент, что выводит поля, может быть на любом уровне вложенности от формы. На страницу таких может быть штук 50. Соответственно, либо прокидываем 100500 раз кучу пропсов, либо единожды объявляем provide/inject
CRM, огромные формы. Данные тянутся со стора в виде нормализованных списков моделей.
Есть компонент, отвечающий за обработку данных на уровне модели, представляющей определенную сущность. Есть компонент, прокси-обертка, выводящая конкретное поле (обертка нужна, т.к. тип поля приходит с бэка). И ему необходима определенная информация из родительской формы.
Так вот этот компонент, что выводит поля, может быть на любом уровне вложенности от формы. На страницу таких может быть штук 50. Соответственно, либо прокидываем 100500 раз кучу пропсов, либо единожды объявляем provide/inject
+1
У меня была задача глобально во все формы (точнее в кастомную обертку) добавить блокировку сохранения до окончания загрузки файлов. Через provide/inject передал с формы функцию, которая в форме добавляла в коллекцию промис, а при его выполнения — удаляла. Коллекция не пустая — блокируем.
0
та пара опций всегда используется вместе и позволяет передать данные от компонента родителя во всю иерархию его потомков. Эти опции прежде всего используют для написания плагинов, официальная документация не рекомендует использовать их в приложениях.
Участники core-team сами говорят, что это утверждение спорное. Потому скорее всего формулировку «не рекомендуется использовать в приложениях» уберут к релизу 3 версии.
0
Provide / Inject
Интересно а есть решение?, когда нужно с дочернего элемента поменять мутацию в родительском компоненте,
к примеру чтобы не писать
this.$parent.$parent.$parent.$parent
и чтобы это было без VueX )
0
НЛО прилетело и опубликовало эту надпись здесь
Я не совсем в курсе, как именно примеси в vue устроены, но если в vue даже с optionMergeStrategies не получиться сделать из примесей объекты с изолированными полями и методами, то про mixins как раз стоит забыть. Смешивание — это конечно простой, но одновременно один их худших способов вынесения повторно используемого кода.
0
Зарегистрируйтесь на Хабре , чтобы оставить комментарий
Возможности Vue, о которых не следует забывать