[Vue] Slot을 이용한 컨텐츠 제공

slot을 사용해 부모 컴포넌트에서 텍스트 전달해주기

slot 태그는 자식 컴포넌트에서 부모 컴포넌트가 전달해주는 텍스트를 출력할때 사용한다. App.vue에서 Apple이라는 텍스트를 자식 컴포넌트 MyBtn에 전달해주고 전달해준 텍스트는 slot 태그 안에 삽입된다.

<--! App.vue -->
<template>
  <MyBtn>Apple</MyBtn>
</template>

<script>
import MyBtn from './components/MyBtn.vue';

export default {
  name: 'App',
  components: {
    MyBtn,
  },
};
</script>

slot 태그 안에 텍스트가 있는 경우 부모 컴포넌트에서 전달해준 텍스트가 더 높은 우선순위를 가지므로 출력되지 않는다. 부모 컴포넌트 안에 전달해줄 텍스트가 없는 경우에만 slot 태그 안에 있는 문자가 출력된다.

<template>
  <div class="btn">
    <slot>Banana</slot>
  </div>
</template>

<style scoped>
.btn {
  display: inline-block;
  margin: 4px;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: gray;
  color: white;
  cursor: pointer;
}
</style>

 

v-slot을 사용해 전달해줄 텍스트 순서 보장해주기

v-slot 디렉티브는 같은 이름을 가진 자식 컴포넌트의 요소에 해당하는 텍스트를 전달해준다. v-slot은 #으로 축약해서 사용할 수 있다.

<template v-slot:icon><span>(B) </span></template>
<template #:icon><span>(B) </span></template>

 

아래 예제에서 (B) 텍스트를 MyBtn 컴포넌트에 전달하기 위해 v-slot:icon 디렉티브를 넣어주었고 MyBtn에서 icon이라는 name 속성값을 가진 요소에 해당하는 텍스트가 전달된다. 

<--! App.vue -->
<template>
  <MyBtn>
    <template v-slot:icon><span>(B) </span></template>
    <template v-slot:text><span>Banana</span></template>  
  </MyBtn>
</template>

<script>
import MyBtn from './components/MyBtn.vue';

export default {
  name: 'App',
  components: {
    MyBtn,
  },
};
</script>

 

v-slot:icon의 디렉티브를 가진 요소의 텍스트는 name="icon" 속성을 가진 요소의 텍스트로 들어가고 v-slot:text의 디렉티브를 가진 요소의 텍스트는 name="text" 속성을 가진 요소의 텍스트로 들어간다. 

<template>
  <div class="btn">
    <slot name="icon"></slot>
    <slot name="text"></slot>
  </div>
</template>

<style scoped>
.btn {
  display: inline-block;
  margin: 4px;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: gray;
  color: white;
  cursor: pointer;
}
</style>