Vue.js 정리 (v-slot)

slot

• 양보하는 기법을 사용할때 slot 을 이용한다
• 동적영역을 가진 컴포넌트는 구분자인 name 을 설정하면서 slot 을 넣어둔다
• slot 주입하는 컴포넌트에서 template 에서 v-slot:<name> 으로 내용을 주입한다.

// slot에게 양보하는 컴포넌트
<div class="modal">
	<header>
    	<slot name="header"></slot>
    </header>
    <main>
	    <slot></slot>  // name을 지정하지 않으면 default
    </main>
    <footer>
    	<slot name="footer"></slot>
    </footer>
</div>


// slot에게 실체를 전달하는 컴포넌트
<template v-slot:header>
	<h1>{{ title }}</h1>
</template>
<template v-slot:default>
	<div>본문내용</div>
    <div>추가설명</div>
</template>
<template v-slot:footer>
	<div>푸터내용</div>
</template>

export default {
    props: {
        title: {
            type: String,
            default: '대입하고 싶은 타이틀'
        }
    }
}

 

• v-slot:<동적으로 변경할 이름>
• v-slot을 동적으로 부여하고 싶을때 변수사용 가능

<tempalte v-slot:[slotName]>
  <div>...</div>
</template>

 

• namedSlot을 좀더 간략하게 기술가능

<template v-slot:header>
아래와 같이 기술 가능
<template #header>