SlotVue32022. 10. 20. 12:05
Table of Contents
Slot
- 부모가 어떠한 template을 내려주면 자식이 slot 키워드를 이용해서 outlet처럼 사용할 수 있다!
- 부모가 내려준 template을 자식이 사용한다는 의미에용
- 문법이 헷갈릴 수 있는 개념이므로 예시를 통해 익혀보자!
부모 컴포넌트
- 기존에 부모가 자식 컴포넌트를 불러온 방식과는 약간 다르게? 자식 컴포넌트 사이에 어떠한 template을 넣어주고 있다!
<template>
<SlotChild><h1>I'm fragment from parent</h1></SlotChild>
</template>
<script>
import SlotChild from "./components/SlotChild.vue";
export default {
name: "App",
components: { SlotChild },
};
</script>
- 자식 컴포넌트가 slot이라는 키워드를 사용해서 부모 컴포넌트가 내려준 template을 사용할 수 있다!
<template>
<div>
<h1>I'm slot child!</h1>
<slot>Parent didn't provide any fragment</slot>
</div>
</template>
- 자식이 <slot></slot>이라고 적어둔 부분에 부모 컴포넌트에서 내려준 I'm fragment from parent가 화면에 나타난다!
fallback content (디폴트 slot)
- 만약 부모 컴포넌트에서 template을 내려주지 않고 자식 컴포넌트에서 slot을 사용한다면 자식이 slot 태그에 넣어둔 내용이 렌더링 될 것이다.
- 하지만, 만약 부모가 template을 내려주고 자식이 slot을 사용한다면 부모가 내려준 template이 화면에 나타나고 slot 태그 안의 내용이 무시된다!
부모 컴포넌트
<template>
<SlotChild> </SlotChild>
</template>
<script>
import SlotChild from "./components/SlotChild.vue";
export default {
name: "App",
components: { SlotChild },
};
</script>
자식 컴포넌트
<template>
<div>
<h1>I'm slot child!</h1>
<slot><h1>I'm default fragment</h1></slot>
</div>
</template>
- 만약 부모 컴포넌트를 아래와 같이 바꾸면 slot의 내용이 무시된다!
<template>
<SlotChild>
<h1>I'm fragment from parent</h1>
</SlotChild>
</template>
<script>
import SlotChild from "./components/SlotChild.vue";
export default {
name: "App",
components: { SlotChild },
};
</script>
Named Slots
- 부모 컴포넌트에서 자식 컴포넌트 slot이 받을 template의 이름을 지정해서 건낼 수 있다.
- 자식 컴포넌트는 부모 컴포넌트가 건내준 template의 이름을 name 속성으로 받아 사용한다!
부모 컴포넌트
- 자식 컴포넌트에게 각각 a, b, c라는 이름을 가진 template을 전달한다
<template>
<SlotChild>
<template #a><h3>I'm a</h3></template>
<template #b><h3>I'm b</h3></template>
<template #c><h3>I'm c</h3></template>
</SlotChild>
</template>
<script>
import SlotChild from "./components/SlotChild.vue";
export default {
name: "App",
components: { SlotChild },
};
</script>
자식 컴포넌트
- 자식 컴포넌트는 부모 컴포넌트가 건내준 template을 각각의 이름에 맞게 name이라는 속성을 사용해서 사용한다!
<template>
<div>
<h1>I'm slot child!</h1>
<slot name="a"></slot>
<slot name="b"></slot>
<slot name="c"></slot>
<!-- use default fragment -->
<slot name="d">I'm default</slot>
</div>
</template>
- 부모 컴포넌트가 a, b, c라는 이름으로 template을 건내줬지만 d라는 이름은 건내주지 않았으므로 자식이 slot에 선언한 디폴트 값이 화면에 나타난다
'Vue3' 카테고리의 다른 글
provide/inject (0) | 2022.10.21 |
---|---|
vue-router (0) | 2022.10.20 |
중요! 부모 state 변경하기 (emit + v-model) (0) | 2022.10.19 |
부모 state 변경하기 (prop) (0) | 2022.10.17 |
Array 렌더링 (v-for) (0) | 2022.10.17 |
@덕구공 :: Duck9s'
주니어 개발자에욤
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!