Шаблоны динамических компонентов с помощью Vue.js

Шаблоны динамических компонентов с помощью Vue.js

От автора: динамические компоненты не всегда имеют одинаковую структуру. Иногда нам необходимо управлять многими различными состояниями. Это может быть полезно сделать асинхронно.

Пример использования

Шаблоны компонентов используются в Scrumpy в нескольких местах: уведомления, комментарии и вложения. Давайте рассмотрим комментарии, чтобы понять, что я на самом деле подразумеваю под этим.

Комментарии — это теперь не просто текстовые поля. Вы ожидаете, что сможете размещать в них ссылки, загружать изображения, встраивать видео и многое другое. Все эти совершенно разные элементы должны быть представлены в этом комментарии. Если вы попытаетесь сделать это в рамках одного компонента, он может быстро стать абсолютным беспорядочным.

Наиболее распространенные превью для ссылок — данные open graph, изображения и видео

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

Однако код может стать очень громоздким и повторяющимся, если список поддерживаемых шаблонов становится длиннее и длиннее. В нашем случае это касается комментариев — просто подумайте о поддержке вложений для Youtube, Twitter, Github, Soundcloud, Vimeo, Figma … список бесконечен.

Шаблоны динамических компонентов

Другой способ — реализовать какой-то загрузчик, который загружает именно тот шаблон, который вам нужен. Это позволяет написать чистый компонент следующим образом:

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

Структура папок для шаблонов динамических компонентов

Лично мне нравится создавать папку для каждого компонента, потому что позже можно добавить другие файлы для стилей и тестов. Конечно, как вы хотите построить структуру, зависит от вас. Затем мы рассмотрим, как этот компонент dynamic-link собирается.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Так что здесь происходит? Динамические компоненты поддерживаются Vue.js по умолчанию. Проблема в том, что вам необходимо зарегистрировать / импортировать все компоненты, которые вы хотите использовать.

Здесь ничего не добавляется, потому что мы хотим динамически использовать наши компоненты. Поэтому мы можем использовать динамический импорт из Webpack. Мы также используем вместе с ними вычисляемые значения, вот где происходит магия — да, вычисляемые значения могут возвращать функцию. Супер удобно!

Когда наш компонент смонтирован, мы пытаемся загрузить шаблон. Если что-то пошло не так, мы можем установить резервный шаблон. Это может быть полезно для отображения сообщений об ошибках для пользователей.

Заключение

Это может быть полезно, если у вас много разных представлений для одного компонента.

Это легко расширяемо.

Это асинхронно. Шаблоны загружаются только при необходимости.

Сохраняет DRY-код.

Это в основном все! Я хотел бы услышать, если вы уже используете эту технику?

Автор: Philipp Kühn

Источник: https://medium.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Фреймворк VUE JS

VUE JS - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree