Svelte 슬롯에 데이터를 전달하는 2가지 방법

@sveltejs에서 슬롯을 사용하는 방법을 배웠습니다. 이제 슬롯이 있는 콘텐츠에 동적 데이터를 전달하는 방법을 살펴보겠습니다.

<Component>
  <div>i want {dynamic} {data}!</div>
</Component>

이 기사는 "Svelte 101"시리즈 "슬롯을 통해 데이터 전달"의 제 비디오를 요약한 것입니다.

비디오를 선호한다면 자세한 연습을 확인하십시오!



슬롯을 사용할 때 슬롯 콘텐츠의 데이터는 2가지 구성 요소에서 가져올 수 있습니다.

현재 구성 요소 (A)

우리가 사용하는 구성 요소 (B)

<!-- filename: A.svelte -->
<B>
  <div>i want {dynamic} {data}!</div>
</B>

1. 현재 구성 요소에서 데이터 전달

현재 구성 요소(A)에서 데이터를 전달하는 것은 항상 하는 일입니다.

스크립트 태그에서 변수를 정의하십시오.

사용

<!-- filename: A.svelte -->
<script>
  let dataFromA = 'dynamic';
</script>

<B>
  <div>i want {dataFromA} {data}!</div>
</B>

2. 사용 중인 구성 요소에서 데이터 전달

그러나 구성 요소(B)에서 데이터를 전달하려면 데이터를 props로 슬롯에 전달해야 합니다.

<!-- filename: B.svelte -->
<script>
  let dataFromB = 'data';
</script>

<slot dataFromB={dataFromB} />

<!-- or using shorthand: -->
<slot {dataFromB} />

그리고 그것을 받기 위해 우리가 let: 바인딩이라고 부르는 것을 생성합니다.

<!-- filename: A.svelte -->
<script>
  let dataFromA = 'dynamic';
</script>

<B let:dataFromB>
  <div>i want {dataFromA} {dataFromB}!</div>
</B>

let: + 슬롯에 전달된 소품 이름

으로 시작합니다.

그러면 props 이름 변수를 슬롯 콘텐츠에 사용할 수 있습니다.

let 바인딩은 props 변수에 액세스하기 위해 아래 요소에 대한 새 범위를 생성합니다.

필요에 따라 소품 이름을 바꿀 수 있습니다.

<!-- filename: A.svelte -->
<script>
  let dataFromA = 'dynamic';
</script>

<B let:dataFromB={somethingElse}>
  <div>i want {dataFromA} {somethingElse}!</div>
</B>

이것은 소품 이름이 외부 범위에서 변수를 가리고 두 변수에 모두 액세스하려는 경우에 특히 유용합니다.

<!-- filename: A.svelte -->
<script>
  let data = 'from a';
</script>

<B let:data={dataFromB}>
  <div>data from A: {data}</div>
  <div>data from B: {dataFromB}</div>
</B>

명명된 슬롯용 슬롯 소품

명명된 슬롯을 기억하십니까?

다른 슬롯 콘텐츠에 대해 다른 데이터를 전달하도록 선택할 수 있습니다!

<!-- filename: B.svelte -->
<script>
  let title = "Passing data to slot";
  let content = "Svelte is fun!";
</script>

<slot name="header" {title}  />
<slot name="body" {content} />

<!-- filename: A.svelte -->
<B>
  <svelte:fragment slot="header" let:title>
    <h1>{title}</h1>
  </svelte:fragment>

  <svelte:fragment slot="body" let:content>
    <div>{content}</div>
  </svelte:fragment>
</B>

반응 데이터

음, let: 바인딩은 양방향이 아닙니다. (지금은 아닙니다 😓)

구성 요소 B에 데이터를 다시 전달하려면 콜백 함수가 필요합니다.

<!-- filename: B.svelte -->
<script>
  let dataFromB = 'data';

  function updateData(newData) {
    dataFromB = newData;
  }
</script>

<slot {dataFromB} {updateData} />

<!-- filename: A.svelte -->
<B let:dataFromB let:updateData>
  <div>i want {dataFromB}!</div>
  <button on:click={() => {
    updateData(123);
  }}>Click Me</button>
</B>

음, 콜백 함수의 대안은 저장소를 사용하는 것이지만 스크립트의 최상위 수준에서 선언되지 않은 저장소에 대해 $를 사용하는 것은 아직 지원되지 않습니다!

... 그리고 해결 방법이 더 나은 것 같지 않습니다 😓

<!-- filename: A.svelte -->
<B let:dataFromB>
  <!-- ⚠️ Stores must be declared at the top level of the component (this may change in a future version of Svelte) -->
  <div>i want {$dataFromB}!</div>
  <button on:click={() => { $dataFromB = 123; }}>
    Click Me
  </button>
</B>

<!-- Workaround -->
<script>
  import { get } from 'svelte/store';
</script>

<B let:dataFromB>
  <div>i want {get(dataFromB)}!</div>
  <button on:click={() => { dataFromB.set(123); }}>
    Click Me
  </button>
</B>

참조

Svelte 튜토리얼: 슬롯 소품https://svelte.dev/tutorial/slot-props