[vue3] props, context

setup 내부에서 props 와  context 사용하기

// App.vue
<template>
  <MyBtn
    class="heropy"
    style="color:red;"
    color="#ff0000"
    @hello="log">
    Apple
  </MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn'
export default {
  components:{
    MyBtn
  },
  methods:{
    log(){
      console.log('Hello World!')
    }
  }
}
</script>

//MyBtn.vue

<template>
  <div 
    v-bind="$attrs"
    class="btn"
    @click="hello">
    <slot></slot>
  </div>
</template>

<script>
import { onMounted } from 'vue'
export default {
 inheritAttrs:false,
 props:{
   color:{
     type:String,
     default:'gray'
   }
 },
 emits:['hello'],
//  mounted(){
//    console.log(this.color)
//    console.log(this.$attrs)
//  },
//  methods:{
//    hello(){
//      this.$emit('hello')
//    }
//  },
 setup(props, context){
   function hello(){
     context.emit('hello')
   }
   onMounted(()=>{
     console.log(props.color)
     console.log(context.attrs)
   })
   return{
     hello
   }
 }
}
</script>

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

ㅇ