slot

<MyBtnComponent>qwevdasdf</MyBtnComponent>

얘를 들어 다른 컴포넌트에서 저 MyBtnComponent에 저렇게 줬다면

 

<div >

    <slot></slot>

  </div>

MyBtnComponent에서 저 안에 있는 값을 <slot></slot>하면 가져올 수 있음.

 

 

참고로, 태그도 들어감

 

<MyBtnComponent><h1>asdf</h1></MyBtnComponent>

태그 다 적용 됨.

 

 

참고로, 만약 MyBtnComponent에서 h1에 대한 스타일을 지정했는데, style 범위를 scope로 했으면 h1 스타일 적용 안됨.

저 h1은 저렇게 h1 넣어준 컴포넌트에서 스타일 줘야 함.

아니면 글로벌 스타일을 찾겠지.

 

h1은 저거 넣어준 컴포넌트 꺼라고 생각하면 됨.

 

 

 

또, 저렇게 뿐만 아니라 slot 여러 개 줄 수 있음.

  <MyBtnComponent>

    <template v-slot:aaa>

      <span>{B}</span>

    </template>

    <template v-slot:bbb>

      <span>Banana</span>

    </template>

  </MyBtnComponent>

저렇게 template로 묶은다음에 v-slot:슬롯이름

하면 됨.

 

쓸 때는 MyBtnComponent에서

<template>

  <button class="btn" :style="{color:color}">

    <slot name="aaa"></slot>

    <slot name="bbb"></slot>

  </button>

</template>

연결 됨.

이러면 이제 바인딩 되는 거라 순서 상관 없음.

 

짧게 쓰려면

#aaa

  <MyBtnComponent>

    <template #aaa>

      <span>{B}</span>

    </template>

    <template #bbb>

      <span>Banana</span>

    </template>

  </MyBtnComponent>