슬롯(slot)

slot

props 와 emit은 편리하지만 속성으로 전달해야할 정보가 HTML태그가 포함된거면 사용하기 쉽지 않음

 

슬롯 사용법

<slot></slot>

태그 작성하고 부모컴포넌트에서는 콘텐츠 영역에 자식 컴포넌트의 <slot></slot> 영역에 나타낼 HTML마크업을 작성하면 됨

 

명명된 슬롯

//childComponents.vue
<template>
<div class="text" :class="{marquee:showTxt}">
    <slot name = "content_1"></slot>
    <span>
       <slot name = "content_2"></slot>
    </span>
</div>
</template>

//Main.vue
<childComponents :showTxt="showTxt" :bannerInfo="{txtColor, bgColor}">
        <div slot ="content_1"> {{this.firLine}} <br> 이렇게 말해보세요! </div>
        <div slot = "content_2">“{{this.callName}},<br>&nbsp; {{this.secLine}}” </div>
    </childComponents>

slot 에 name을 부여해 해당 html전체를 원하는 곳에 붙여 레이아웃 구성

 

 

이런 것을 위에 것으로 재사용 할 수 있게 만든것! 

//childComponents.vue
<template>
<div class="text" :class="{marquee:showTxt}">
    <div> {{this.firLine}} <br> 이렇게 말해보세요! </div>
    <span>
     	<div>“{{this.callName}},<br>&nbsp; {{this.secLine}}” </div>
    </span>
</div>
</template>