Svelte o Svelte 이해 슬롯에서(기본값 및 이름 지정)

Svelte 5에는 혼란스러울 수 있는 많은 변경 사항이 있습니다. 그래서 Svelte 4에서 Svelte 5까지의 학습 과정을 문서화하려고 합니다.
그 중 하나는 Svelte 5에서 슬롯을 사용하는 것입니다. <= Svelte 4:

에서는 훨씬 더 간단한 프로세스였습니다.

기본 슬롯

Parent.svelte(기본 슬롯, svelte 4)

<Child>
<div>
// Your slot content
</div>
</Child>




</p>
<p>Child.svelte(기본 슬롯, svelte 4)<br>
</p>

<pre class="brush:php;toolbar:false"><slot />

Svelte 5에서는 @render 구문을 사용하여 슬롯을 렌더링해야 하며, 이 구문은 새로운 $props()에서도 가져옵니다.

Parent.svelte(기본 슬롯, svelte 5)

<!-- same as svelte 4 -->
<Child>
<div>
// Your slot content
</div>
</Child>

Child.svelte(기본 슬롯, svelte 5)

<script>
// destructure children from $props()
const { children } = $props()
</script>
<!-- render default slot here (with optional chaining just in case)-->
{@render children?.()}

---

명명된 슬롯

#snippet 및 @render 구문을 모두 사용하여 명명된 슬롯도 변경되었습니다.

Parent.svelte(명명된 슬롯, svelte 4)

<Child>
<div slot="mySlot">
// Your slot content
</div>
</Child>

Child.svelte(명명 슬롯, svelte 4)

<slot name="mySlot" />

Svelte 5에서는 #snippet을 사용하여 슬롯을 전달한 다음 @render 구문을 사용하여 새 $props()에서도 가져오는 슬롯을 렌더링해야 합니다.

Parent.svelte(명명된 슬롯, svelte 5)

<!-- same as svelte 4 -->
<Child>
{#snippet mySlot()}
<div>
// your slot content
</div>
{/snippet}
</Child>

Child.svelte(명명 슬롯, svelte 5)

<script>
// destructure children from $props()
const { mySlot } = $props()
</script>
<!-- render default slot here-->
{@render mySlot()}

---

추가: 슬롯이 if 블록으로 전달되었는지 여부에 따라 조건부로 콘텐츠를 렌더링할 수도 있습니다.

Child.svelte(명명된 슬롯, svelte 5, 조건부 렌더링)

<script>
// destructure children from $props()
const { mySlot } = $props()
</script>
{#if mySlot}
<p>My Slot Section is rendered here</p>
<!-- render default slot here-->
{@render mySlot()}
{/if}

변경 사항이 발생하면 계속 문서화하겠습니다. 그런데 Svelte 5에 대해 어떻게 생각하시나요? 컴파일 시간 증가, 빌드 크기 감소(대규모 프로젝트의 경우) 및 추가 기능이 추가된 복잡성에 비해 가치가 있습니까?

해킹을 즐겨보세요!

위 내용은 Svelte o Svelte 이해 슬롯에서(기본값 및 이름 지정)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!