Компоненты

Создание компонентов

Последнее обновление: 10.09.2017

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

Для создания компонента используется функция Vue.component(tagName, options), где параметр tagName - кастомный элемент html, который будет представлять компонент, а параметр options представляет конфигуацию компонента.

Например, определим простейший компонент:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<hello></hello>
	<hello></hello>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('hello', {
	template: '<h2>Hello</h2>'
})
new Vue({
	el: "#app"
});
</script>
</body>
</html>

Здесь определен компонент для элемента hello. И неважно, что такого элемента в html нет, мы его сами создаем. Более того мы не можем использовать для компонента встроенные элементы html типа div или h2. То есть по сути компонент называется "hello".

В объекте options, который передается компоненту, через свойство template можно задать html-разметку, которую будет содержать компонент. В итоге данная разметка будет вставляться вместо элемента <hello></hello>.

При этом компонент должен быть определен до элемента Vue, в котором он используется.

И при рендеринге страницы вместо элемента hello будет вставлено содержимое компонента:

Введение в компоненты в Vue.js

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

Причем компонент может использоваться только в рамках того элемента, к которому прикреплен объект Vue. То есть мы не можем написать наподобие, вынеся использование компонента во вне:

<hello></hello>
<div id="app">
</div>

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850