[Vue.js] 슬롯 (Slot)

• Slot
  • 컴포넌트를 사용하는데 따로 html 코드를 추가해주고 싶을 때 사용
  • slot에 name을 주면 여러 곳에서 html 코드 추가 가능
• 코드 구현 (Jione.Vue)

<template>
  <div>
    <h1>header1</h1>
    <!-- slot에 이름을 주면 여러 곳에서 html 코드 추가 가능 -->
    <slot name="header" :jione="jione"></slot>
    <p style="font-size: 20px">
      <b>body1</b>
    </p>
    <slot></slot>
    <p>footer</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      jione: "ji-one"
    };
  }
};
</script>
<style scoped>
</style>

 

• About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <Jione>
      <!-- #header == v-slot:header -->
      <template #header = "{jione}">
        <h2>header2 ({{ jione }})</h2>
      </template>
      <!-- slot에 이름 없으면 default -->
      <template #default>
        body2
      </template>
    </Jione>
  </div>
</template>
<script>
import Jione from '@/components/Jione.vue'
export default {
  components:{
    Jione
  },
}
</script>

 

• 실행 화면