Компоненты Vue.js

Компоненты - это отдельные независимые единицы интерфейса. У них может быть собственное состояние, разметка и стиль.

Как использовать компоненты

Компоненты Vue можно определить четырьмя основными способами.

Поговорим кодом.

Первый:

new Vue({
  /* options */
})

Второй:

Vue.component('component-name', {
  /* options */
})

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

Четвертый находится в.vueфайлы, также называемыеОднофайловые компоненты.

Давайте подробно рассмотрим первые 3 способа.

С помощьюnew Vue()или жеVue.component()- это стандартный способ использования Vue, когда вы создаете приложение, которое не является одностраничным приложением (SPA), а скорее использует Vue.js только на некоторых страницах, например, в контактной форме или в корзине покупок. Или, может быть, Vue используется на всех страницах, но сервер отображает макет, а вы передаете HTML-код клиенту, который затем загружает созданное вами приложение Vue.

В SPA, где Vue строит HTML, чаще используются однофайловые компоненты, поскольку они более удобны.

Вы создаете экземпляр Vue, монтируя его на элементе DOM. Если у тебя есть<div id="app"></div>тег, вы будете использовать:

new Vue({ el: '#app' })

Компонент, инициализированный с помощьюnew Vueне имеет соответствующего имени тега, поэтому обычно это основной компонент контейнера.

Остальные компоненты, используемые в приложении, инициализируются с помощьюVue.component(). Такой компонент позволяет вам определять тег, с помощью которого вы можете многократно встраивать компонент в приложение и указывать вывод компонента вtemplateсвойство:

<div id="app">
  <user-name name="Flavio"></user-name>
</div>

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})
new Vue({
el: ‘#app’
})