setup两个注意点

365 阅读1分钟

这是我参与11月更文挑战的第18天,活动详情查看:2021最后一次更文挑战

setup的执行时机:

在beforeCreate之前执行一次,thisundefined

setup的参数

props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性

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

在beforeCreate之前执行一次,this是undefined,如下图所示:

image.png image.png

props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性

如果不用props接收父组件传过来的参数,此时的props参数里面是收不到任何值的

image.png

image.png

只有在props中接收了,props中才能有值:

image.png

context:上下文对象

image.png image.png 我们可以看到attrs中的值为一个对象,包含了没有在props配置中声明的属性,相当于vue2中的this.$attrs,这里从父组件中传过来的的值有两个,一个msg,一个school,但是我们在props中接收的只有一个msg,所yischool这个变量就会在attrs中

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

子组件给父组件传值:

子组件: image.png 父组件:

image.png 这里要注意的是,我们在子组件中一定要写emits,不然会报警告

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

image.png

image.png

image.png