slot 초간단 활용 (name 속성 활용)

 

slot

특정한 컴포넌트의 일부 UI를 재사용하는 것.

 

slot을 활용한다는 건 간단하게 말해서 …

자식에서 slot을 정의,

부모에서 slot을 삽입!

 

 

만들면서 이해해보자

// 하위 컴포넌트
<template>
  <div>슬롯컴포넌트
    <slot name="A">
      <!-- 상위 컴포넌트에서 정의할 영역 -->
    </slot>
    <slot name="B">
      <!-- 상위 컴포넌트에서 정의할 영역 -->
    </slot>
    <slot name="empty">
      <!-- 상위 컴포넌트에서 정의할 영역 -->
      정의되지않음
    </slot>
  </div>
</template>

<script>
export default {
}
</script>

 

하위 컴포넌트에서는 각각 A, B, empty 라는 name의 slot을 정의하였고

현재는 아무것도 없는 텅텅 빈 상태

 

// 상위 컴포넌트
<template>
  <div>
    <SlotComponent>
      <template slot="A">
        <div>A</div>
      </template>
      <!-- slotRouterTest라는 slot을 정의 -->
      <router-link slot="B" :to="`/`">
        B로 이동
      </router-link>
    </SlotComponent>
  </div>
</template>

<script>
import SlotComponent from '../components/SlotComponent.vue'
export default {
  components: {
    SlotComponent,
  }
}
</script>

 

그리고 부모 컴포넌트에서 slot 속성에 name을 지정하여

해당 name에 맞는 slot에 각각 삽입하면 끝

 

template과 rotuer-link를 삽입하였다.

컴포넌트 삽입도 가능하다.