vue3 slot

//App.vue

<template>
  <!-- @이름은 뭐든 상관없다! -->
  <MyBtn>      
    <template #text>
      <span>Banana</span>
    </template>
    <template #icon>
      <span>(B)</span>
    </template>
    <!-- 여기서 txt,icon 순서여도
    MyBtn.vue에서 icon-txt 순서이므로
    실제로 icon-txt 순으로 출력된다. -->
  </MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn'
export default {
  components:{
    MyBtn
  },
}

// v-bind => :
// v-on   => @
// v-slot => #
</script>

 

//MyBtn.vue

<template>
  <div class="btn">
    <!-- <slot>apple</slot> -->
    <!-- App.vue의 MyBtn  내부에 값이 있으면 apple은 출력되지않음
    <MyBtun /> 으로 닫혀있으면 apple 출력-->

    <slot name="icon"></slot>
    <slot name="text"></slot>
  </div>
</template>

<script>
export default {
 
}
</script>

<style scoped>
  .btn{
    display: inline-block;
    margin: 4px;
    padding:6px 12px;
    border-radius: 4px;
    background-color:grey;
    color: white;
    cursor: pointer;  
  }
</style>