Автор оригинала: Anthony Gore.
У вас есть компоненты в вашем приложении Vue, которые обмениваются аналогичными вариантами или даже разметкой шаблона?
Было бы хорошей идеей создать Базовый компонент с общими вариантами и разметкой, а затем продлить базовый компонент для создания sub-компоненты Отказ Такая архитектура поможет вам применить сухой принцип в вашем коде (не повторять себя), что может сделать ваш код более читаемым и уменьшить возможность ошибок.
Vue предоставляет некоторые функциональные возможности, чтобы помочь с наследством компонента, но вам также придется добавить часть собственной изобретательности.
Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/06/12.
Пример: вопросы опроса
Вот простой опрос, сделанный с Vue.js:
Вы заметите, что каждый вопрос имеет другой ассоциированный тип ввода:
- Ввод текста
- Выберите ввод
- Радиовход
Хорошая архитектура заключается в том, чтобы сделать каждый тип ввода/ввода в другой, многоразовый компонент. Я назвал их, чтобы соответствовать вышеуказанному:
SeviceInPutText.
SeviceInputselect.
SeviceInPutradio.
Имеет смысл, что каждый вопрос/вход – это другой компонент, потому что каждая нужна собственная разметка (например, vs
) и каждый нужен свои собственные реквизиты, методы и т. Д. Отказ Однако эти компоненты будут иметь много общего:
- Вопрос
- Функция проверки
- Состояние ошибки
И вот так я думаю, что это отличное использование для расширения компонентов!
Базовый компонент
Каждый из компонентов наследует из одного файлового компонента под названием SeviceInputbase
Отказ Обратите внимание на следующее:
-
Вопрос:| опоры будут общими через каждый компонент. Мы могли бы добавить более распространенные варианты, но давайте придерживайтесь всего для этого простого примера.
Мы как-то нужно копировать реквизиты от этого компонента на любой расширенный компонент. - Мы как-то нужно вставить разметку для разных входов
- внутри шаблон.
SeviceInputbase.vue.
{{ question }}
the appropriate input should go here
Наследование вариантов компонентов
Забыв шаблон на мгновение, как мы получаем каждый субкурс для наследства реквизитов? Каждый понадобится Вопрос:| как опоры, а также их собственные уникальные реквизиты:
Это может быть достигнуто путем импорта базового компонента и указывая на него с расширяется
вариант:
SeviceInputtext.vue.
How to include the question here???
Глядя в Vue devtools, мы видим, что используя расширяется
действительно дал нам базовые реквизиты в нашем дополнительном компонент:
Стратегия слияния
Вам может быть интересно, как субполюбильный компонент унаследовал Вопрос:| опоры вместо перезаписи это.
расширяется Вариант реализует
Слияние стратегии Это гарантирует, что ваши варианты будут объединены правильно. Например, если у реквизиты имеют разные имена, они, очевидно, будут включены, но если у них есть то же имя, Vue предпочтет предпочтение субфотоку.
Стратегия слияния также работает с другими вариантами, такими как методы, вычисленные свойства и крючки жизненного цикла, объединяя их с аналогичной логикой. Проверьте Документы Для точной логики на том, насколько Vue это, но если вам нужно, вы можете определить свою собственную стратегию.
Примечание: также есть возможность использования Мистин
свойство в компоненте вместо расширяется
Отказ Я предпочитаю расширяется
Для этого применения случая, хотя, поскольку он имеет немного другую стратегию слияния, которая дает дополнительные компоненты варианты более высокого приоритета.
Расширение шаблона
Это довольно просто расширить варианты компонента – как насчет шаблона, хотя?
Стратегия слияния не работает с Шаблон
вариант. Мы либо наследуем базовый шаблон, либо определяем новый и перезаписать его. Но как мы можем комбинировать их?
Мое решение для этого – использовать Мопс Предварительный процессор. Это приходит с включить
и расширяется
Варианты, так что кажется хорошим пригодным для этого дизайна.
Базовый компонент
Во-первых, давайте преобразом шаблон нашего базового компонента в синтаксис мопса:
div.survey-base h4 {{ question }} block input
Обратите внимание на следующее:
- Мы добавляем
lang = "pug"
к нашему тегу шаблона, чтобы сказать Vue-loader Чтобы обработать это как шаблон мопса (также, не забудьте добавить модуль модуля для вашего проекта, а такжеNPM I --save-dev Pug
) - Мы используем
Блок ввода
Чтобы объявить розетку для субфотопользователя.
Так вот где это становится слегка грязным. Если мы хотим, чтобы наши детские компоненты расширить этот шаблон, нам нужно поставить его в свой собственный файл:
SeviceInputbase.pug
div.survey-base h4 {{ question }} block input
Тогда мы …| включить Этот файл в нашем базовом компонент, поэтому он все еще может использоваться в качестве обычного автономного компонента:
SeviceInputbase.vue.
include SurveyInputBase.pug
Это стыдно, чтобы сделать это, так как оно разбивает цель компонентов «единичный файл», но для этого использования случаи, я думаю, что это того стоит. Вероятно, вы можете сделать пользовательский погрузчик WebPack, чтобы избежать необходимости сделать это.
Suboment.
Давайте теперь конвертим наш шаблон нашего дополнительного компонента, а также в мопс:
SeviceInputtext.vue.
extends SurveyInputBase.pug block input input(type="text" :placeholder="placeholder")
Поддоны используют расширяется
Особенность мопса, которая включает в себя базовый компонент и выводит любой пользовательский контент в вход
Блок (концепция, анализуемая для слоты ).
Вот что бы шаблон Sub компонента будет эффективно выглядеть как после продления основания и переведен обратно на регулярный шаблон HTML Vue:
{{ question }}
Возьми все вместе
Используя эту стратегию, мы можем пойти дальше и создавать два других подполюсных компонента SeviceInputselect
и SeviceInPutradio
со своими собственными реквизитами и разметкой.
Если мы тогда используем их в проекте, наш основной шаблон может выглядеть так:
И вот оказанная разметка:
1. What is your name?
2. What is your favorite UI framework?
3. What backend do you use?
Node.jsLaravelRuby
Примечание: мы могли бы также создать создание SeviceInputbase
Компонент, поскольку он будет работать автономным, но в этом примере не нужен. Я думал, что это важный момент, чтобы упомянуть, хотя.
Стать старшим Vue Developer в 2020 году.
Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.
Учить больше