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

//父组件<template><demo msg="你好啊" @hello="handleHello"><template v-slot:hahaha><span>哈哈哈</span></template></demo></template><script>import Demofrom"./components/Demo.vue"exportdefault{name:'App',components:{
    Demo},setup(){functionhandleHello(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'exportdefault{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:'女'})functiontest(){
        context.emit('hello','888')}return{
      person,
      test}}}</script>