Именованные слоты

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

Каждому слоту можно назначить определенное имя и через это имя передавать в него некоторое содержимое из родительского компонента. Для этого в элементе <slot> используется атрибут name.

Например, определим следующую веб-страницу:

<!DOCTYPE html>
<html>
<head>
<title>Slots in Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<container>
		<h1 slot="header">Заголовок статьи</h1>
		<p slot="header">Дата статьи: 13/10/2017</p>
		<p>Первый абзац.</p>
		<p>Второй абзац.</p>
		<p slot="footer">Футер</p>
	 </container>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('container', { 
	template: `<div>
				<header>
					<slot name="header">Заголовок по умолчанию</slot>
				</header>
				<article>
					<slot></slot>
				</article>
				<footer>
					<slot name="footer"></slot>
				</footer>
			</div>` 
});
new Vue({ 
  el: '#app'
});
</script>
</body>
</html>

Компонент container определяет ряд слотов. Причем один из слотов является обычным, а остальные два - именованными. Именованные слоты как и обычные могут иметь содержимое по умолчанию:

<div>
	<header>
		<slot name="header">Заголовок по умолчанию</slot>
	</header>
	<article>
		<slot></slot>
	</article>
	<footer>
		<slot name="footer"></slot>
	</footer>
</div>

В родительском компоненте для слотов передается содержимое, которое также помещается внутрь дочернео компонента. Причем для передачи контента для именованных слотов html-элементы должны определять атрибут slot="имя_слота". Этому атрибуту передается имя слота.

<div id="app">
	<container>
		<h1 slot="header">Заголовок статьи</h1>
		<p slot="header">Дата статьи: 13/10/2017</p>
		<p>Первый абзац.</p>
		<p>Второй абзац.</p>
		<p slot="footer">Футер</p>
	 </container>
</div>

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

Named slots in Vue.js

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

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