vue-property-decorator 装饰器的使用

本文介绍了@vue/cli4+Ts官方推荐库中各类Vue装饰器的使用方法,如@Prop、@PropSync等,还说明了它们的功能和特点,像@PropSync可实现父子组件双向绑定。此外,补充了computed计算属性的定义方式,以及对Component类装饰器使用的疑问。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

@vue/cli4+Ts 官方推荐,这个库完全依赖于vue-class-component(引入它再抛出)官方文档

使用方法:

@Prop

相当于把prop换成了@Prop (以下为写法对比)

在这里插入图片描述

在这里插入图片描述

实际应用中是否传入类型,因为ts的类型检查,感觉差别不大;

注意定义默认属性不能写成@Prop() prop = ‘default value’

@PropSync

相当于做了两步,第一步跟@Prop一样,第二步还在背后创建了一个计算属性的get和set,这样就可以像普通数据属性一样使用,而且它可以在父组件中附加.sync修饰符(实现父子组件的双向绑定)
在这里插入图片描述
在这里插入图片描述

@Model

在这里插入图片描述
在这里插入图片描述

个人感觉不常用

@ModelSync

可以实现父组件在外面v-model 而不是.sync的需求,还有就是这两个值其实都可以随便传,因为父级使用v-model实现的话根本不认属性是什么,当然如果父级不使用v-model而是手动绑定啥的就有用了

在这里插入图片描述

在这里插入图片描述

@Watch

实现监听,方法名字可以随便取,没有限制;

在这里插入图片描述
在这里插入图片描述

@Provide / @Inject

provide和inject较少使用,他们是成对出现的,用于父组件向子孙组件传递数据;

前端团队 > vue-property-decorator 装饰器的使用 > 截屏2021-11-18 下午3.23.36.png前端团队 > vue-property-decorator 装饰器的使用 > 截屏2021-11-18 下午3.23.23.png

在这里插入图片描述

@ProvideReactive / @InjectReactive

是@Provide和@Inject的响应式(父组件修改了提供的值,自组件可以捕获到)

在这里插入图片描述

@Emit

如果返回的是一个promise,则在resolve之前运行它;

如果事件没有通过事件参数提供事件的名称,则使用函数名称(这种情况下,函数名会由camelCase转为kebab-case)
在这里插入图片描述

在这里插入图片描述

@Ref

接收一个可选参数,用来指向元素或子组件的引用信息。如果没有提供这个参数,会使用装饰器后面的属性名充当参数;
在这里插入图片描述

在这里插入图片描述

@VModel

在这里插入图片描述

在这里插入图片描述

@Component

该属性完全继承于vue-class-component,接收一个对象作为参数,可以在对象中声明components,filters等未提供修饰器的选项,也可以声明computed,watch等;

Mixins

在这里插入图片描述

其他补充:
1、对于computed计算属性,只需要将计算属性的属性名定义为一个函数,然后在前加上get关键字就可以;

2、被Component类装饰器包装过后的类其实已经不是原来的类了,这个类在被vue实例化组件的时候,调用的构造器已经不是我们写在代码里的那个;装饰器会返回一个新的构造器,是Vue Component;而我们通过箭头函数能访问到的那个原来类的实例,是装饰器在复制被装饰类的实例方法时创建出来的实例;所以在类里使用箭头函数,使这个方法能够访问调用被装饰的类,是否会造成内存泄漏???

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值