슬롯으로 세밀한 구성 요소 결합

아마존에서 내 책 보기https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
지금 http://jauyeung.net/subscribe/에 내 이메일 목록을 구독하십시오.
Svelte는 전방 웹 응용 프로그램을 개발하는 데 사용되는 신흥 전방 프레임워크입니다.
그것은 사용이 간단해서 우리가 결과를 신속하게 만들 수 있게 한다.
본고에서 우리는 어떻게 플러그로 섬세한 부품을 끼워 넣는지 연구할 것이다.

성분 구성
우리는 slot 구성 요소를 다른 구성 요소에 끼워 넣기 위해 가는 구성 요소에 추가할 수 있습니다.
예를 들어, 다음과 같이 slot 어셈블리를 사용할 수 있습니다.App.svelte  :

<script>
import Parent from "./Parent.svelte";
import Foo from "./Foo.svelte";
</script>

<Parent>
  <Foo />
</Parent>

Parent.svelte  :

<div>
  <p>Start</p>
  <p>
    <slot></slot>
  </p>
  <p>End</p>
</div>

Foo.svelte  :

<button>
  foo
</button>

위 코드에는 Parent 구성 요소가 있고 slot 구성 요소가 있습니다. 이 구성 요소는 하나 이상의 구성 요소를 끼워 넣을 수 있습니다.Parent에는 3개의 p원소가 있다.slot는 두 번째 p컴포넌트에 있습니다.
우리는 단추로 Foo 구성 요소를 만들었다.그리고 우리가 쓰면:

<Parent>
  <Foo />
</Parent>

App.svelte에서는 시작과 끝 사이에 표시되는 버튼이 표시됩니다.

예비 내용
반환된 컨텐트를 slot 태그 사이에 두면 slot 컴포넌트의 태그 사이에 컨텐트가 전달되지 않은 경우에도 표시되는 컨텐트를 볼 수 있습니다.
예를 들어, 예비(fallback) 컨텐트를 추가하고 표시하기 위해 다음 코드를 작성할 수 있습니다.App.svelte  :

<script>
import Parent from "./Parent.svelte";
</script>

<Parent />

Parent.svelte  :

<div>
  <p>Start</p>
  <p>
    <slot>
      <p>Nothing to see here</p>
    </slot>
  </p>
  <p>End</p>
</div>

위 코드에는 다음이 포함됩니다.

<p>Nothing to see here</p>

slot 태그 사이에 있습니다.그리고 우리가 <Parent />에 그렇게 썼을 때App.svelte:

Start

Nothing to see here

End

화면에 표시됩니다. 태그 사이에서 하위 요소를 전달하는 것이 아니라 Parent 자동 닫기 버전을 사용했기 때문입니다.

명명된 슬롯이 있는 다중 슬롯
이름을 지정하여 슬롯을 여러 개 추가할 수 있습니다.그런 다음 slot 속성을 사용하여 각 슬롯에 내용을 추가할 수 있습니다. 이 속성의 값은 슬롯의 이름입니다.
예를 들어, 다음과 같은 코드를 작성하여 여러 슬롯을 추가하고 내용을 구성할 수 있습니다.Contact.svelte  :

<article>
  <h2>
    <slot name="name">
      <span>No name</span>
    </slot>
  </h2>

  <div class="address">
    <slot name="address">
      <span>No address</span>
    </slot>
  </div>

  <div class="email">
    <slot name="email">
      <span>No email</span>
    </slot>
  </div>
</article>

App.svelte

<script>
import Contact from "./Contact.svelte";
</script>

<Contact>
  <span slot="name">
    Jane Smith
  </span>

  <span slot="address">
    123 A St.
  </span>

  <span slot="email">
    [email protected]
  </span>
</Contact>

위 코드에서 우리는 name에 여러 개의 슬롯을 정의했고 각 슬롯마다 Contact.svelte 속성을 추가했다.
그리고 우리는 Contact에서 App.svelte 구성 요소를 사용할 수 있으며, 구성 요소를 각 슬롯에 전달할 때 그 이름에 따라 표시할 수 있다.따라서 우리는 다음과 같은 것을 보아야 한다.

Jane Smith

123 A St.
[email protected]

화면에 표시됩니다.

슬롯을 통해 서브데이터를 상위 어셈블리에 전달
우리는 슬롯 도구를 사용하여 데이터를 하위 구성 요소에서 부모 구성 요소로 전달할 수 있습니다.슬롯 아이템을 정의하기 위해 아이템 이름을 설정하고 부모에게 전달할 변수를 값으로 합니다.
호랑이 기계 도구를 정의하고 사용하려면 다음과 같은 코드를 작성할 수 있습니다.Contact.svelte  :

<script>
let names = ["John", "Jane", "Mary"];
</script>

<article>
  <slot names={names}></slot>
</article>

위의 코드는 slot propnames이 있는데 우리는 names 변수를 그에게 전달할 것이다.
그리고 우리는 App.svelte에서 그것을 사용할 수 있다. 아래와 같다.

<script>
import Contact from "./Contact.svelte";
</script>

<Contact let:names={names}>
  {#each names as name}
    <p>{name}</p>
  {/each}
</Contact>

let 명령은 slot prop 변수를 정의했고 이 변수의 값은 slot prop이어야 한다.
위 코드에서 let:names={names} 슬롯 아이템을 설정했는데 그 중에서 names 중의 Contact 아이템은 names 중의 App.svelte 변수의 값으로 설정되었다.
그리고 우리는 names 순환 중처럼 순환 중each에 접근할 수 있다.
따라서 우리는 다음과 같이 해야 한다.

John

Jane

Mary

화면에 표시됩니다.
명명조에도 도구가 있을 수 있다.우리는 다음과 같이 쓸 수 있다.Contact.svelte  :

<script>
let contactName = "Jane Smith";
let address = "123 A. St";
let email = "[email protected]";
</script>

<article>
  <h2>
    <slot name="name" contactName={contactName}>
      <span>No name</span>
    </slot>
  </h2>
  <div class="address">
    <slot name="address" address={address}>
      <span>No address</span>
    </slot>
  </div>
  <div class="email">
    <slot name="email" email={email}>
      <span>No email</span>
    </slot>
  </div>
</article>

App.svelte  :

<script>
import Contact from "./Contact.svelte";
</script>

<Contact>
  <span slot="name" let:contactName={contactName}>
    {contactName}
  </span>
  <span slot="address" let:address={address}>
    {address}
  </span>
  <span slot="email" let:email={email}>
    {email}
  </span>
</Contact>

위 코드에서, 우리는 모든 슬롯에 슬롯 도구를 정의한 다음, App.svelte 명령을 사용하여 그것들을 let 구성 요소에 전달한다. 우리가 단일 슬롯 예시에서 말한 것처럼.
따라서 우리는 다음과 같이 해야 한다.

Jane Smith

123 A St.
[email protected]

우리가 앞의 예시에서 한 것처럼 나타나다.

결론
우리는 슬롯을 사용하여 구성 요소를 다른 구성 요소에 끼워 넣을 수 있다.서브어셈블리에서 부모 어셈블리로 데이터를 전달하기 위해 슬롯 도구를 사용할 수 있습니다.
슬롯 아이템은 let 명령에 의해 정의됩니다.그것의 값은 슬롯 속성 값을 인용하는 변수 이름이어야 합니다.그런 다음 탭 사이의 슬롯 속성 값에 액세스할 수 있습니다.slot 태그 사이에 반환 내용을 추가하고 표시할 수 있으며, 태그 인용 구성 요소를 자동으로 닫습니다.