Компоненты - это отдельные независимые единицы интерфейса. У них может быть собственное состояние, разметка и стиль.
Компоненты - это отдельные независимые единицы интерфейса. У них может быть собственное состояние, разметка и стиль.
Как использовать компоненты
Компоненты 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’
})
Tech Wiki Online!