강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của japanspitz
japanspitz

câu hỏi đã được viết

Giao diện web bắt đầu với Svelte

Tái sử dụng thành phần hiệu quả bằng cách sử dụng các khe

hovering 상태값 App.svelte에 전달시 오류

Đã giải quyết

Viết

·

233

0

App.svelte

<script>

import Card from './card.svelte';

</script>

<Card>

<span slot="name">

홍길동

</span>

<span slot="address">

서울특별시<br>여의도동

</span>

<span slot="email">

ab@abc.com

</span>

</Card>

<Card let:hovering>

<span slot="email">

{#if hovering}

<b>ab@abc.com</b>

{:else}

ab@abc.com

{/if}

</span>

</Card>

 

 

card.svelte

<style>

.contact-card {

width: 300px;

border: 1px solid #aaa;

border-radius: 2px;

box-shadow: 2px 2px 8px rgba(0,0,0,0.1);

padding: 1em;

margin: 0 0 1em 0;

}

h2{

padding: 0 0 0.2em 0;

margin: 0 0 1em 0;

border-bottom: 1px solid #ff3e00;

}

.address, .email {

padding: 0 0 0 1.5em;

background: 0 50% no-repeat;

background-size: 1em 1em;

margin: 0 0 0.5em 0;

line-height: 1.2;

}

.address { background-image: url(tutorial.icons/map-marker.svg); }

.email { background-image: url(tutorial/icons/email.svg); }

.missing { color: #999; }

.hovering { background-color: #ffed99;}

</style>

<script>

let hovering = false;

const enter = () => hovering = true;

const leave = () => hovering = false;

</script>

<article class="contact-card" class:hovering on:mouseenter={enter} on:mouseleave={leave}>

<h2>

<slot name="name">

<span class="missing">이름 미입력</span>

</slot>

</h2>

<div class="address">

<slot name="address">

<span class="missing">주소 미입력</span>

</slot>

</div>

{#if $$slots.email}

<div class="email">

<slot {hovering} name="email">

<span class="missing">이메일 미입력</span>

</slot>

</div>

{/if}

</article>

 

제가 작성한 코드인데 뭔가 잘못된 것인지 오류 메세지로

let:hovering declared on parent component cannot be used inside named slot (App.svelte:21:7)

라고 나옵니다.

강의를 제가 잘못 따라한 것인지 궁금합니다.

 

<script>

import Card from './card.svelte';

</script>

<Card>

<span slot="name">

홍길동

</span>

<span slot="address">

서울특별시<br>여의도동

</span>

<span slot="email">

ab@abc.com

</span>

</Card>

<Card let:hovering>

<span slot="email" let:hovering>

{#if hovering}

<b>ab@abc.com</b>

{:else}

ab@abc.com

{/if}

</span>

</Card>

이렇게 slot 내부에 다시 hovering을 선언하면 작동은 잘 되는데 맞게 작성한지 잘 몰라서 질문드립니다.

svelte

Câu trả lời 1

0

Indie Coder님의 프로필 이미지
Indie Coder
Người chia sẻ kiến thức

다음과 같이 props로 받는 부분을 <Card>가 아니라 named slot 본체에 하면 정상적으로 작동합니다.

아마도 이부분은 svelte가 버전업을 하면서 변경된 부분인 것 같습니다.

 

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

<Card>
...
	<span slot="email" let:hovering > <!-- 이부분에서 let으로 값을 받음 --->
		{#if hovering}
			<b>myemail@google.com</b> 
		{:else}
			myemail@google.com
		{/if}
		<br>
		{hovering}
	</span>
</Card>
japanspitz님의 프로필 이미지
japanspitz
Người đặt câu hỏi

아하! 넵 감사합니다~

Hình ảnh hồ sơ của japanspitz
japanspitz

câu hỏi đã được viết

Đặt câu hỏi