На низком уровне, компоненты представляют собой изолированные части (блоки) пользовательского интерфейса (UI). В отдельные компоненты выделяются:
- большие обособленные структуры html, css и javascript (примеры: модальное окно, галерея);
- часто повторяемые структуры html, используемые с разными данными (примеры: статья, товар).
- элементы форм и схожих структур.
Компонент может взаимодействовать с другими компонентами.
Возьмем, к примеру, html-элемент. Мы можем использовать этот элемент с любыми технологиями в браузере, и мы можем передавать такие свойства, как width и height и слушайте такие события, как onclick.
На высоком уровне, мы можем сказать, что компоненты — это набор API-интерфейсов веб-платформы. (интерфейсы прикладного программирования), которые позволяют нам создавать теги HTML, со встроенными стилями и JavaScript логикой, которые будут работать в современных веб-браузерах и может использоваться фрэймворками JavaScript (React, Angular, Vue.js и т. д.).
Ожидается, что компоненты будут использоваться в веб-браузерах в течение длительного времени и предлагают множество преимущества, в том числе следующие:
• Веб-компоненты можно использовать повторно и работать между платформами.
• Веб-компоненты могут работать во всех основных веб-браузерах.
• Веб-компоненты просты в обслуживании и готовы к будущем, если они основаны на спецификациях веб-платформы.
Каждый компонент, не зависимо от того, к какому типу он относится обладают одним интерфейсом общения со всей системой. Однако, по способу подключения, можно выделить следующие типы компонентов:
- базовый (App.vue). Это главный компонент приложения, содержащий базовый шаблон или структуру приложения.
- маршрутные (это компоненты, вызываемые маршрутизатором, папка routes)
- вспомогательные компоненты.
Практика