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

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

Компоненты могут быть зарегистрированы локально и глобально. Глобальные компоненты доступны для любого объекта Vue на веб-странице. Локальные компоненты доступны только в рамках определенных объектов Vue.

Для локальной регистрации компонентов у объекта Vue устанавливается свойство components:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<section-header></section-header>
	<section-content></section-content>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('section-header',{
	template:'<h3>Header</h3>'
});
var comp = {
	template:'<div>Hello World</div>'
};

new Vue({
	el: "#app",
	components:{
		'section-content':comp
	}
});
</script>
</body>
</html>

Здесь определен глобальный компонент - section-header. Глобальный компонент определяется с помощью метода Vue.component().

И также здесь определен компонент comp. По сути он представляет объект, который передается в качестве второго параметра в Vue.component() и может иметь все те же свойства, например, свойство template. Этот компонент локально регистрируется в объекте Vue:

components:{
	'section-content':comp
}

Причем для его рендеринга будет использоваться элемент <section-content>.

Локальные компоненты в Vue.js

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

Рассмотрим еще один пример:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app1">
	<section-header></section-header>
	<section-content></section-content>
	<section-footer></section-footer>
</div>
<hr/>
<div id="app2">
	<section-header></section-header>
	<section-content></section-content>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('section-header',{
	template:'<h2>Header</h2>'
});
var comp1 = {
	template:'<div>Content 1</div>'
};
var comp2 = {
	template:'<div>Content 2</div>'
};
var footer = {
	template:'<p><b>Footer</b></p>'
};
new Vue({
	el: "#app1",
	components:{
		'section-content':comp1,
		'section-footer':footer
	}
});
new Vue({
	el: "#app2",
	components:{
		'section-content':comp2
	}
});
</script>
</body>
</html>

Здесь определено два объекта Vue. Компонент section-header является глобальным и поэтому доступен из любого объекта Vue. В дополнение к нему первый объект локально регистрирует два компонента - comp1 и footer, а второй объект Vue - один компонент comp2.

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

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

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