set的两个注意点
执行的时机
setup执行的时机是非常早的,它甚至比beforeCreate还要早,并且this是undefined而不是实例对象
setup接收到的参数
通过测试得知,setup可以接受到两个参数
参数1:props:用于组件传递数据
我们可以通过组件传递数据测试:
这时候出现了警告:
意思是给组件传递了数据但是缺没有接收数据,这个警告在vue2中是没有的
想用的话需要声明接收,这时候再看警告就没了,并且props里面接收到了参数
如果接收一个不存在的数据,也不会报错,只是会呈现undefined
参数2:context
说完了第一个参数,再说说第二个参数,在官方文档里面叫做context(上下文)
它里面主要有三个属性需要我们注意
1:attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于 this.$attrs
。
2:slots: 收到的插槽内容, 相当于 this.$slots
。
3:emit: 分发自定义事件的函数, 相当于 this.$emit
。
set的两个注意点总结
-
setup执行的时机
- 在beforeCreate之前执行一次,this是undefined。
-
setup的参数
-
props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
-
context:上下文对象
- attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于
this.$attrs
。 - slots: 收到的插槽内容, 相当于
this.$slots
。 - emit: 分发自定义事件的函数, 相当于
this.$emit
。
- attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于
-