Локальная и глобальная регистрация компонентов

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

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

Глобальная регистрация

Для глобальной регистрации применяется метод component() объекта приложения Vue:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <component-a></component-a>
    <component-b></component-b>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = Vue.createApp({});

app.component('component-a', {
    template: '<h2>Component A</h2>'
});
app.component('component-b', {
    template: '<h2>Component B</h2>'
});
app.mount('#app');
</script>
</body>
</html>

В данном случае создается два компонента component-a и component-b.

Глобальные и локальные компоненты в Vue 3

Локальная регистрация компонентов

При локальной регистрации компоненты задаются как обычные объкты JavaScript с необходимыми конфигурационными настройками. Затем для локальной регистрации компоненты передаются в объекта Vue устанавливается через свойство components:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <component-a></component-a>
    <component-b></component-b>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const ComponentA = {
  template: '<h2>Component A</h2>'
}
const ComponentB = {
  template: '<h2>Component B</h2>'
}
const app = Vue.createApp({
	components: {
		'component-a': ComponentA,
		'component-b': ComponentB
	}
});

app.mount('#app');
</script>
</body>
</html>

В данном случае для каждого компонента определена только одна конфигурационная настройка - параметр template.

const ComponentA = {
  template: '<h2>Component A</h2>'
}
const ComponentB = {
  template: '<h2>Component B</h2>'
}

Затем они передаются параметру components в объект приложения Vue:

components: {
		'component-a': ComponentA,
		'component-b': ComponentB
	}

Здесь каждому компоненту назначается определеное имя, например, объекту ComponentA назначается имя "component-a" и соответственно для его рендеринга на веб-странице будет использоваться элемент <component-a>.

Если бы мы не передали объект компонента в свойство components, тогда мы не смогли бы его использовать.

В итоге мы получим тот же самый результат, что и в примере с глобальными компонентами:

Глобальные и локальные компоненты в Vue 3

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

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