Vue3学习：setup的两个注意

1. setup执行的时机

1. 在beforeCreate之前执行一次，this是undefined--(无法操作)。

    import {reactive} from 'vue'
    export default {
       
        beforeCreate() {
            console.log('beforeCreate')
        },
        setup(){
            console.log('setup')
}
}

---

setup的参数

1、props

父组件 app.vue-传参数

<template>
    <Demo msg="你好啊" school="尚硅谷">
    </Demo>
</template>

子组件必须声明，否则会有警告

export default {
        name: 'Demo',
        props:['msg','school'],//声明
        setup(props){
             console.log('---setup---',props) //响应对象

}
}

2、context：上下文对象

export default {
        name: 'Demo',
        props:['msg','school'],//声明
        setup(props){
             console.log('---setup---',props) //响应对象

}
}

没有声明就会在attrs上出现

export default {
        name: 'Demo',
        props:['msg',],//声明
        setup(props){
        console.log('---setup---',context.attrs) //相当与Vue2中的$attrs
}
}

emit自定义事件

<Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">

<script>
    import Demo from './components/Demo'
    export default {
        name: 'App',
        components:{Demo},
        setup(){
            function showHelloMsg(value){
                alert(`你好啊，你触发了hello事件，我收到的参数是:${value}！`)
            }
            return {
                showHelloMsg
            }
        }
    }
</script>

<button @click="test">测试触发一下Demo组件的Hello事件</button>
<script>
    import {reactive} from 'vue'
    export default {
        name: 'Demo',
        props:['msg','school'],
        emits:['hello'],必须声明
        setup(props,context){
         
            console.log('---setup---',context.emit) //触发自定义事件的。
         
            //方法
            function test(){
                context.emit('hello',666)//触发
            }

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

slots插槽--传递插槽名称的方法

    <Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
        <template v-slot:qwe>
            <span>xxx</span>
        </template>
        <template v-slot:asd>
            <span>sss</span>
        </template>
    </Demo>

    console.log('---setup---',context.slots) //插槽

• setup的参数

1. props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

2. context：上下文对象

• attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

• slots: 收到的插槽内容, 相当于 this.$slots。

• emit: 分发自定义事件的函数, 相当于 this.$emit。