vue3 Componunts

<template>
  <div
    :class="{ large: large}"
    :style="{ backgroundColor:color}"
    class="btn">
    <slot></slot>
    <!-- {{ text }} -->
  </div>
</template>

<script>
export default {
  props :{
    color:{
      type: String,
      default:'gray'
    },
    large:{
      type: Boolean,
      default: false
    },

    //slot 태그가 있으면 text 부분은 필요없어짐
    // text:{
    //   type:String,
    //   default: ''
    // }
  }
}
</script>

<style scoped lang="scss">
  .btn{
    display: inline-block;
    margin: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: grey;
    color: white;
    cursor: pointer;
    &.large{
    font-size: 20px;
    padding:10px 20px;
  }
  }

</style>

 

<template>
  <MyBtn>Apple</MyBtn>
   
  <MyBtn 
    color="
    #000">
    Bananaa
  </MyBtn>
  <!-- 부모로부터 자식에 적용 -->
  <MyBtn :color="color">
    Melon
  </MyBtn>
  <MyBtn
    large
    color="royalblue" />
  <MyBtn><span style="color:pink;">Strawberry</span></MyBtn>
  <MyBtn />
  <MyBtn>Cherry</MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn'
export default {
  components:{
    MyBtn
  },
  data(){
    return{
      color:'red'
    }
  }
}
  </script>