Компоненты

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <hello></hello>
    <hello></hello>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = Vue.createApp({});

app.component('hello', {
    template: '<h2>Hello</h2>'
});
app.mount('#app');
</script>
</body>
</html>

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

В коде JavaScript, как обычно, определяется объект приложения Vue:

const app = Vue.createApp({});

Только теперь мы не передаем в функцию Vue.createApp() никаких параметров для приложения, только пустой объект. Хотя это необязательно, мы могли бы определить и для объекта приложения какие-нибудь данные, методы и прочие параметры приложения.

Далее у объекта приложения Vue после его создания вызывается метод app.component()

app.component('hello', { template: '
Hello
'});

Первый аргумент метод - "hello" представляет название компонента, то есть наш компонент называется "hello". Стоит отметить, что между названием элемента и названием компонента есть соответствие: элемент <hello> и компонент "hello".

Есть два способа именования компонента: kebab-case и PascalCase. Например, у нас есть следующий элемент в разметке, в который будет рендерится компонент:

<my-component-name></my-component-name>

Тогда компонент должен называться либо "my-component-name" (kebab-case), либо "MyComponentName" (PascalCase).

Второй параметр метода app.component() устанавливает конфигурацию компонента. Так, через свойство template можно задать html-разметку, которую будет содержать компонент. В итоге данная разметка будет вставляться вместо элемента <hello></hello>.

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

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

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

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

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

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

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