Skip to main content

Tương tự như các phần tử có thể có các phần tử con...

<div>
	<p>Tôi là một phần tử con của thẻ div</p>
</div>

... thì các component cũng có thể. Trước khi một component có thể chấp nhận các phần tử con, nó cần biết nơi để đặt chúng. Chúng ta làm điều này với phần tử <slot>. Đặt nó bên trong Card.svelte:

Card.svelte
<div class="card">
	<slot></slot>
</div>

Bây giờ bạn có thể đặt các phần tử lên thẻ:

App.svelte
<Card>
	<span>Patrick BATEMAN</span>
	<span>Vice President</span>
</Card>

Tiếp theo: Slot được đặt tên

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
	import Card from './Card.svelte';
</script>
 
<main>
	<Card>
		<!-- đặt nội dung ở đây -->
	</Card>
</main>
 
<style>
	main {
		display: grid;
		place-items: center;
		height: 100%;
		background: url(./wood.svg);
	}
</style>
initialising