Vue3中常用的Composition(组合)API-set的两个注意点

145 阅读1分钟

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