vue3.0 setup的两个注意点

setup的两个注意点

• setup执行的时机
  在beforeCreate之前执行一次，this是undefined。
• setup的参数：

1.props:值为对象，包含:组件外部传递过来，且组件内部声明接收了的属性。
2.context: 上下文对象
2.1，attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当于[this.$attrs。2.2，slots:收到的插槽内容,相当于this.$slots。
2.3，emit:分发自定义事件的函数,相当于this.$emit]。

Demo.vue代码：

<template>
    <h1>一个人的信息</h1>
    <h2>姓名:{{person.name}}</h2>
    <h2>年龄:{{person.age}}</h2>
    <button @click="test">测试欻一个Demo组件的Hello事件</button>
</template>

<script>
import { reactive } from 'vue'
export default {
    name:'Demo',
    props:['msg','school'],
    emits:['hello'],//声明绑定hello事件
    setup(props,context){
        console.log('--setup--',context.slots)

        //数据
        let person = reactive({
            name:'张三',
            age:15
        })
        
        //方法
        function test(){
            context.emit('hello',666)
        }

        //返回一个对象（常用）
        return {
            person,
            test
        }
    }
}
</script>

效果：