• 목차

컴포넌트를 해당 자리에 갖다 붙일 수 있도록 하는, 컴포넌트 안에 또 다른 컴포넌트를 전달할 수 있도록 하는 문법.

// usage
<navigation-link url=“/profile”>
  Your Profile 
</navigation-link>

// navigation-link template 
<a v-bind:href=“url” class=“nav-link”>
  <slot></slot>
</a>

slot이 들어오지 않을 경우 기본값 초기화 가능.

// navigation-link template
<a v-bind:href=“url” class=“nav-link”>
  <slot>나는기본값</slot>
</a>

구문법과 신문법 비교

신문법 v-slot: 2.6.0+에서 적용

다중 슬롯

slot을 여러개 사용할 때, slot에 이름을 붙일 수 있다. v-slot을 쓴 template 에 싸여있지 않은 것들은 디폴트 slot에 해당되는 걸로 간주된다.

v-slot만 template 태그에 추가할 수 있다. (예외가 존재하기는 함)

// navigation-link template
<a v-bind:href=“url” class=“nav-link”>
<slot name=“a”>나는기본값</slot>
	<slot></slot>
	<slot name=“b”>나는기본값2</slot>
</a>

// usage
<navigation-link url=“/profile”>
 	<template v-slot:a>
		<h1>나는 a</h1>
    </template>
	<h1>나는 디폴트 슬롯</h1>
<template v-slot:b>
		<h1>나는 b</h1>
    </template>
</navigation-link> 

범위있는 슬롯

부모가 자식 컴포넌트에 있는 데이터를 이용해 자유자재로 해당 데이터를 내려주고자 할 때, 사용할 수 있다.

• <slot v-bind:user1="user"> 에서 "user"는 해당 slot을 선언하는 컴포넌트 내부의 data에 있는 값이다. bind된 이름인 user1로 사용된다.
• 부모에서 접근 할 때는 template의 v-slot에 넣은 이름에서 내가 slot에서 새로 설정한 이름으로 접근하여 사용할 수 있다. 아래 예제에서는 slotProps.user1.lastName

//current-user template (다른 곳에서 사용될 comp이며, user라는 data를 가지고 있음. 
// 해당 slot에 자동으로 user라는 data가 bind될 수 있도록 함.)
Vue.component('current-user', {
	template: 
			'<span>
			  <slot v-bind:user1=“user”>  
				<-- user1은 부모에서 user를 접근할 때 사용 --> 
			    {{ user.lastName }}
			  </slot>
			</span>',
	data: () => {
		user: {
				lastName: 'minju'
			}
		}
})

//current-user usage (부모 컴포넌트에서 current-user가 가지고 있는 user1를 사용할 수 있음.) 
<current-user>
  <template v-slot:default=“slotProps”>
    {{ slotProps.user1.lastName }}
  </template>
</current-user>

단독 디폴트 슬롯을 위한 축약 문법

디폴트 슬롯이 하나만 있는 템플릿의 경우, 각 slot template에 대해서 v-slot 값을 넣어주지 않아도 상관이 없다. 사용하는 component의 태그에 주입이 가능하다.

// 축약
<current-user v-slot:default=“slotProps”>
  {{ slotProps.user.firstName }}
</current-user>

// 더 축약
<current-user v-slot=“slotProps”>
  {{ slotProps.user.firstName }}
</current-user>