Загрузите и создайте компоненты VueJS на основе имени, строки или конфигурации.
Перво-наперво, если вы только начинаете работать с VueJS, это может показаться вам слишком продвинутым, я настоятельно рекомендую прочитать документацию по VueJS, особенно по компонентам.
Это мой первый гид, критика приветствуется :)
Предисловие
Замена компонентов на основе пользовательского ввода или даже просто установка формы с помощью файла json, действительно полезный метод для поддержания низкого уровня работоспособности на протяжении большого проекта, поскольку обычно есть сотни компонентов / форм / страниц / и т. Д., Поэтому внесение изменений в коде это может вызвать волновой эффект и что-то сломать.
Поскольку VueJS будет обрабатывать все грязные детали обработки DOM, мы можем сосредоточиться на решении бизнес-задач.
Я расскажу о загрузке компонентов по имени, создании динамических и асинхронных компонентов.
Компонент «магия»
Выполнение динамических задач не было бы таким простым без <component v-bind:is="dynComponent"></component> проверки Динамические и асинхронные компоненты для получения более подробной информации. В основном компоненты будут отображать компонент, асинхронную функцию или по имени компонента.
Загрузка компонентов по имени
Использование <component/> позволит вам получить доступ к глобальным, а также локальным компонентам по имени.
Цикл между компонентами полезен, но в реальном мире вы бы передали ему некоторые свойства. Чтобы добавить реквизиты, давайте изменим компонент test-comp0 и шаблон приложения.
Это передаст имя опоры каждому компоненту. Чтобы решить эту проблему, мы можем иметь вычисляемое свойство и привязать его к компоненту.
Компоненты на лету
Компоненты «на лету» - это компоненты, которые мы просто генерируем по мере необходимости с помощью javascript. Это показывает, насколько мощным является <component></component>, в некоторых сценариях использования могут быть созданы виджеты.
Мы можем создавать и тестировать компоненты на основе пользовательского ввода.
ПРИМЕЧАНИЕ: будьте очень осторожны, это может позволить злоумышленникам атаковать ваше приложение. Убедитесь, что источник является надежным!
Вы можете видеть, как вы изменяете текстовое поле, компонент должен сразу отображаться. Я не рекомендую использовать это, но я думаю, что это хороший пример того, насколько мощным является <component></component>.
Импорт асинхронных компонентов
Для меня это наиболее полезный вариант использования компонента. Очень рекомендую прочитать официальный гид.
Проблема реального мира
В моем последнем проекте у нас была проблема, заключающаяся в том, что мы хотели собрать информацию о пользователях, но поля менялись в зависимости от пути, для одного путешествия требовалась электронная почта, для других - электронная почта и телефон.
Решение заключалось в том, чтобы получить определение пути в файле JSON, каждый раз, когда пользователь начинал путешествие, мы загружали этот файл и загружали поля. Стратегия заключалась в том, чтобы использовать имена для загрузки компонента, динамически загружая компоненты по имени, но в итоге мы загрузили все возможные редакторы в Vue.Component, это сработало ... но загрузка их при запуске означает, что время запуска и размер приложения были значительными. больше, чем нужно.
Решение
Использование смеси Async, Dynamic компонентов и Webpack.
Надеюсь, моя первая статья будет полезна для вас, я нахожу восхитительным, насколько мощным и гибким является <component></component>.
Если у вас есть еще варианты использования <component></component>, дайте мне знать в комментариях.
