Svelte

Svelte | コンポーネントとスロット

コンポーネント

App.svelte ファイルが肥大化するのを防ぐためにファイルを分割することができる。

src/App.svelte

-import 文でをファイル名を指定してコンポーネントを読み込む
-コンポーネントはタグとして <コンポネント名>...</コンポネント名> 使用する
-コンポーネントに変数を渡すには、要素として記述する。このような変数を props と呼ぶ

1
2
3
4
5
6
7
8
9
10
<script>
    import Message from './message.svelte';
</script>

<main>
    <Message message="Hello, world"></Message>
</main>

<style>
</style>

src/message.svelte

-引き渡された変数は export して宣言する

1
2
3
4
5
6
7
<script>
  export let message;
</script>

<div>
  {message}
</div>

スロット

<コンポーネント名> と </コンポーネント名> に囲まれた部分はそのままだと表示されないが、コンポーネント側で <slot></slot> として表示することができる。

src/App.svelte

コンポーネント<Card>と</Card>の間に挟まれたは通常だと表示されない。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    import Message from './message.svelte';
    import Card from './card.svelte';
</script>

<main>
    <Card>
        <Message message="Hello, world"></Message>
    </Card>
</main>

<style>
</style>

src/card.svelte

<slot></slot> Card コンポーネントで囲んだ内容を呼び出すことができる。

1
2
3
4
5
6
7
8
9
10
11
<div>
  <slot></slot>
</div>

<style>
  div {
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 1em;
  }
</style>

src/message.svelte

1
2
3
4
5
6
7
<script>
  export let message;
</script>

<div>
  {message}
</div>

展開される HTML

以下のHTMLのように展開される。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en"><head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>Svelte app</title>

	<link rel="icon" type="image/png" href="/favicon.png">
	<link rel="stylesheet" href="/global.css">
	<link rel="stylesheet" href="/build/bundle.css">

	<script defer="" src="/build/bundle.js"></script>
<script async="" src="//localhost:35729/livereload.js?snipver=1" id="livereloadscript"></script></head>

<body>


<main><div class="svelte-tzljh"><div>Hello, world</div></div></main></body></html>