Слоты

Введение в слоты

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

Слоты представляют способ создания фиксированной структуры компонента, при котором содержимое для различных частей компонента определяет родительский компонент. Во Vue.js слоты реализуются через элемент <slot>, вместо которого родительский компонент вставляет содержимое в дочерний компонент.

Рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
<title>Slots in Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<ads></ads>
	<ads> 
		<div>
			<p>Открыт набор на бесплатные курсы Udacity.</p>
			<p>Заявки принимаются до 16 октября</p>
		</div>
	</ads>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('ads', { 
  template: `<div> 
               <h3>Объявление</h3> 
               <slot>Здесь могла бы ваша реклама</slot>
             </div>` 
});
new Vue({ 
  el: '#app'
});
</script>
</body>
</html>

Здесь определен компонент ads, который представляет блок под рекламное объявление. Само рекламное объявление будет добавляться в компонент через элемент <slot>. При этом на момент определения компонента мы можем не знать, а будет ли предоставлять какое-либо содержимое. Поэтому мы можем определить в элементе <slot> некоторое содержимое по умолчанию.

<slot>Здесь могла бы ваша реклама</slot>

При использовании компонента мы можем вложить в него некоторый контент, который будет вставляться в элемент <slot> и заменять в нем содержимое по умолчанию:

<div id="app">
	<ads></ads>
	<ads> 
		<div>
			<p>Открыт набор на бесплатные курсы Udacity.</p>
			<p>Заявки принимаются до 16 октября</p>
		</div>
	</ads>
</div>

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

Второй же компонент ads принимает контент и заменяет им содержимое в элементе <slot>.

Slots in Vue.js

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

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