vue3 之 setup注意点（props，context）及组件封装

//父组件
<template>
  <demo msg="你好啊" @hello="handleHello">
    <template v-slot:hahaha>
      <span>哈哈哈</span>
    </template>
  </demo>
</template>

<script>
import Demo from "./components/Demo.vue"
export default {
  name: 'App',
  components: {
    Demo
  },
  setup() {
    function handleHello(value) {
      console.log(value); //888
    }
    return {
      handleHello
    }
  }
}
</script>

//子组件
<template>
    <div>{{person.name}}</div>
    <div>{{person.sex}}</div>
    <div>{{person.hobby}}</div> 
    <button @click="test">点我</button>
    <br>
    <slot name="hahaha"></slot>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'Demo',
  props: ['msg'],
  emits: ['hello'],
  setup(props, context) {
    console.log(props); //Proxy {msg: '你好啊'}
    console.log(context.attrs); //相当于vue2的 this.$attrs （将没写在props中的传参，捡漏到this.$attrs中）
    console.log(context.slots);//Proxy {_: 1, __vInternal: 1, hahaha: ƒ}

    let person = reactive({
      name: 'may',
      sex: '女'
    })

    function test() {
        context.emit('hello','888')
    }

    return {
      person,
      test
    }
  }
}
</script>