Рубрики
Без рубрики

Расширение компонентов Vuejs

У вас есть компоненты в вашем приложении Vue.js, которые обмениваются подобными вариантами или даже разметкой шаблона? В этой статье я покажу вам шаблон дизайна для расширения компонентов Vue, которые помогут сохранить ваш код сухим.

Автор оригинала: Anthony Gore.

У вас есть компоненты в вашем приложении Vue, которые обмениваются аналогичными вариантами или даже разметкой шаблона?

Было бы хорошей идеей создать Базовый компонент с общими вариантами и разметкой, а затем продлить базовый компонент для создания sub-компоненты Отказ Такая архитектура поможет вам применить сухой принцип в вашем коде (не повторять себя), что может сделать ваш код более читаемым и уменьшить возможность ошибок.

Vue предоставляет некоторые функциональные возможности, чтобы помочь с наследством компонента, но вам также придется добавить часть собственной изобретательности.

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/06/12.

Пример: вопросы опроса

Вот простой опрос, сделанный с Vue.js:

Вы заметите, что каждый вопрос имеет другой ассоциированный тип ввода:

  1. Ввод текста
  2. Выберите ввод
  3. Радиовход

Хорошая архитектура заключается в том, чтобы сделать каждый тип ввода/ввода в другой, многоразовый компонент. Я назвал их, чтобы соответствовать вышеуказанному:

  1. SeviceInPutText.
  2. SeviceInputselect.
  3. SeviceInPutradio.

Имеет смысл, что каждый вопрос/вход – это другой компонент, потому что каждая нужна собственная разметка (например, vs ) и каждый нужен свои собственные реквизиты, методы и т. Д. Отказ Однако эти компоненты будут иметь много общего:

  • Вопрос
  • Функция проверки
  • Состояние ошибки

И вот так я думаю, что это отличное использование для расширения компонентов!

Базовый компонент

Каждый из компонентов наследует из одного файлового компонента под названием SeviceInputbase Отказ Обратите внимание на следующее:

  • Вопрос:| опоры будут общими через каждый компонент. Мы могли бы добавить более распространенные варианты, но давайте придерживайтесь всего для этого простого примера. Мы как-то нужно копировать реквизиты от этого компонента на любой расширенный компонент.
  • Мы как-то нужно вставить разметку для разных входов
  • внутри шаблон.

SeviceInputbase.vue.



Наследование вариантов компонентов

Забыв шаблон на мгновение, как мы получаем каждый субкурс для наследства реквизитов? Каждый понадобится Вопрос:| как опоры, а также их собственные уникальные реквизиты:

Это может быть достигнуто путем импорта базового компонента и указывая на него с расширяется вариант:

SeviceInputtext.vue.



Глядя в Vue devtools, мы видим, что используя расширяется действительно дал нам базовые реквизиты в нашем дополнительном компонент:

Стратегия слияния

Вам может быть интересно, как субполюбильный компонент унаследовал Вопрос:| опоры вместо перезаписи это. расширяется Вариант реализует Слияние стратегии Это гарантирует, что ваши варианты будут объединены правильно. Например, если у реквизиты имеют разные имена, они, очевидно, будут включены, но если у них есть то же имя, Vue предпочтет предпочтение субфотоку.

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

Примечание: также есть возможность использования Мистин свойство в компоненте вместо расширяется Отказ Я предпочитаю расширяется Для этого применения случая, хотя, поскольку он имеет немного другую стратегию слияния, которая дает дополнительные компоненты варианты более высокого приоритета.

Расширение шаблона

Это довольно просто расширить варианты компонента – как насчет шаблона, хотя?

Стратегия слияния не работает с Шаблон вариант. Мы либо наследуем базовый шаблон, либо определяем новый и перезаписать его. Но как мы можем комбинировать их?

Мое решение для этого – использовать Мопс Предварительный процессор. Это приходит с включить и расширяется Варианты, так что кажется хорошим пригодным для этого дизайна.

Базовый компонент

Во-первых, давайте преобразом шаблон нашего базового компонента в синтаксис мопса:


Обратите внимание на следующее:

  • Мы добавляем lang = "pug" к нашему тегу шаблона, чтобы сказать Vue-loader Чтобы обработать это как шаблон мопса (также, не забудьте добавить модуль модуля для вашего проекта, а также NPM I --save-dev Pug )
  • Мы используем Блок ввода Чтобы объявить розетку для субфотопользователя.

Так вот где это становится слегка грязным. Если мы хотим, чтобы наши детские компоненты расширить этот шаблон, нам нужно поставить его в свой собственный файл:

SeviceInputbase.pug

div.survey-base
  h4 {{ question }}
  block input

Тогда мы …| включить Этот файл в нашем базовом компонент, поэтому он все еще может использоваться в качестве обычного автономного компонента:

SeviceInputbase.vue.



Это стыдно, чтобы сделать это, так как оно разбивает цель компонентов «единичный файл», но для этого использования случаи, я думаю, что это того стоит. Вероятно, вы можете сделать пользовательский погрузчик WebPack, чтобы избежать необходимости сделать это.

Suboment.

Давайте теперь конвертим наш шаблон нашего дополнительного компонента, а также в мопс:

SeviceInputtext.vue.



Поддоны используют расширяется Особенность мопса, которая включает в себя базовый компонент и выводит любой пользовательский контент в вход Блок (концепция, анализуемая для слоты ).

Вот что бы шаблон 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.js
Laravel
Ruby

Примечание: мы могли бы также создать создание SeviceInputbase Компонент, поскольку он будет работать автономным, но в этом примере не нужен. Я думал, что это важный момент, чтобы упомянуть, хотя.

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше