Svelte를 통해 하위 구성 요소에서 상위 구성 요소로 데이터를 보내는 방법

이 글을 작성할 때 SvelteKit 버전 1.0.0-next.483을 사용하고 있었습니다. Svelte가 젊기 때문에 상황이 바뀔 수 있습니다.

문제

그래서 나는 Svelte에서 상위 컨테이너에서 하위 구성 요소로 데이터를 던지는 데 익숙하지만 반대로 하고 싶다면 어떻게 해야 할까요?

내 프로젝트에서 발생한 문제는 다음과 같습니다.

이것은 SectionTitle.svelte라는 자식 구성 요소입니다.

<div class="section-title">
    <div class="section-icon">
        <slot />
    </div>
    <h2 class="large-text">{sectionTitle}</h2>
</div>

이것은 SectionTitle.svelte를 사용하는 부모입니다.

<SectionTitle sectionTitle="Book" let:sectionIcon>
    <Books color="red" width="32" height="32" />
</SectionTitle>

따라서 내 SectionTitle 구성 요소에는 <slot>가 필요하므로 가져올 때 <Books>라는 아이콘 구성 요소를 넣을 수 있습니다. 잘 작동합니다... SectionTitle에 넣은 모든 아이콘에 해당 속성이 필요하다는 것을 깨달을 때까지: color="red" width="32" height="32"

내 솔루션

어떻게든 우리 아이가 부모를 고통에서 해방시키기 위해 고유한 기본 소품 값을 갖도록 해야 합니다.

SectionTitle.svelte

<script>
    export let sectionTitle = '';

    let sectionIcon = {
        color: 'var(--primary-600)',
        height: 32,
        width: 32,
    };
</script>

<div class="section-title">
    <div class="section-icon">
        <slot sectionIcon={sectionIcon} />
    </div>
    <h2 class="large-text">{sectionTitle}</h2>
</div>

그런 다음 다음과 같이 SectionTitle.svelte를 가져와 사용했습니다.

<SectionTitle sectionTitle="UI + UX" let:sectionIcon>
    <FigmaLogo {...sectionIcon} />
</SectionTitle>

<SectionTitle sectionTitle="Book" let:sectionIcon>
    <Books {...sectionIcon} />
</SectionTitle>

이제 어떤 아이콘 구성 요소를

나는 여전히 Svelte를 배우고 있습니다. 제안 사항이 있으면 아래에 의견을 말하십시오.