Svelte의 슬롯 가이드

developer.mozilla.org에 따르면 웹 구성 요소 기술 제품군의 일부인 HTML 요소는 마크업으로 채울 수 있는 웹 구성 요소 내부의 자리 표시자이며, 이를 통해 별도의 DOM 트리를 만들고 함께 표시할 수 있습니다.

로 표현됩니다.

Svelte에서는 구성 요소 간의 통신에 <slot>를 사용합니다. <slot>는 재사용 가능한 UI 구성 요소를 만드는 데 도움이 됩니다.
이 기사에서는 svelte를 사용하는 방법과 예제를 통해 재사용 가능한 구성 요소를 만드는 방법을 배웁니다.

파일SlotComponent.svelte을 만들고 파일에서 다음 코드를 업데이트합니다.

<div class="card">
    <slot name="name"></slot>
    <slot name="location"></slot>
</div>

<style>
    .card {
        width: 400px;
        border: 1px;
        border-radius: 2.5px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        padding: 1em;
    }
</style>

그리고 App.svelte

<script>
    import SlotComponent from './SlotComponent.svelte';
</script>

<main>
    <p> Slot communcation. </p>
    <hr/>
    <SlotComponent>
        <div slot="name">Michael Foo</div>
        <div slot="location">Lives in Mountain</div>

    </SlotComponent>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

페이지를 열면 아래 스크린샷과 같이 표시됩니다.



부모 구성 요소에서 슬롯을 복제하면 어떻게 됩니까? 업데이트를 해보자

<div class="card">
    <slot name="name"></slot>
    <slot name="name"></slot>
    <slot name="location"></slot>
</div>

<style>
    .card {
        width: 400px;
        border: 1px;
        border-radius: 2.5px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        padding: 1em;
    }
</style>

웹 페이지에 이름Michael Foo이 두 번 표시되는 것을 볼 수 있습니다 :).

이제 삭제할 수 있습니다. 슬롯을 테스트하기 위한 것입니다.
때로는 슬롯을 동적으로 로드할 때(예: 가져오기 API 사용). 애플리케이션이 실제 데이터를 수신하는 동안 일부 메시지를 표시해야 합니다. 이를 폴백이라고 합니다.
SlotComponent.svelte 파일에서,

<div class="card">
    <slot name="name">
        <h4>Loading user name ...</h4>
    </slot>
    <slot name="location">
        <h4>Loading user location....</h4>
    </slot>
</div>

<style>
    .card {
        width: 400px;
        border: 1px;
        border-radius: 2.5px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        padding: 1em;
    }
</style>

그리고 App.svelte

<script>
    import SlotComponent from './SlotComponent.svelte';
</script>

<main>
    <p> Slot communcation. </p>
    <hr/>

    <SlotComponent />

</main>

그리고 웹페이지에서

파편

<svelte:fragment> 요소를 사용하면 콘텐츠를 명명된 슬롯에 배치할 수 있습니다. 프래그먼트는 외부 종속성이 없으며 DOM 요소와 독립적입니다.

블로그가 있고 블로그의 title 및 date를 보여주고 싶다고 가정해 보겠습니다.

<div class="card">
    <slot name="blog">Title of the Blog</slot>
    <slot name="body"></slot>
</div>

App.sevelte에서

<script>
    import SlotComponent from './SlotComponent.svelte';
    let date = new Date()
</script>

<main>
    <p> Slot communcation. </p>
    <hr/>

    <SlotComponent>
        <svelte:fragment slot="date">
            <hr />
             <h6>{ date }</h6>
        </svelte:fragment>
    </SlotComponent>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

웹 페이지에서 아래 스크린샷과 같은 콘텐츠를 볼 수 있습니다.

소품을 통한 데이터

슬롯에서 소품을 사용하여 데이터를 전달할 수도 있습니다. let: 이 작업을 위해 예약된 지시문이 있습니다.
SlotComponent.svelte에서

<script>
    import SlotComponent from './SlotComponent.svelte';
    let date = new Date()
</script>

<main>
    <p> Slot communcation. </p>
    <hr/>

    <SlotComponent let:blogs>
        {#each blogs as blog}
            <h4>{blog.title}</h4>
            <p>{blog.body}</p>
        {/each}
    </SlotComponent>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

ajax 쿼리를 사용하여 블로그 개체를 가져올 수 있지만 블로그 개체를 만들었습니다. App.svelte에서

<script>
    import SlotComponent from './SlotComponent.svelte';
    let date = new Date()
</script>

<main>
    <p> Slot communcation. </p>
    <hr/>
    // let:blogs is the reserved keyword for this
    <SlotComponent let:blogs>
        {#each blogs as blog}
            <h4>{blog.title}</h4>
            <p>{blog.body}</p>
        {/each}
    </SlotComponent>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

웹페이지를 새로고침하면 볼 수 있습니다.



슬롯에 대한 모든 것입니다. 다음 기사에서는 데이터를 구성 요소에 전달하는 다른 방법에 대해 알아봅니다. 다음 튜토리얼에서 뵙겠습니다.