본문 바로가기
IT라이프/웹프로그래밍

Vue.js 정리 (v-slot)

by zairan 2022. 9. 22.

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>
반응형

'IT라이프 > 웹프로그래밍' 카테고리의 다른 글

프론트엔드 코딩  (0) 2022.12.09
[Javascript] function vs arrow  (0) 2022.11.03
Atomic Design  (0) 2022.10.05
Cookie vs LocalStorage  (0) 2022.01.24

댓글