详解详解vue-property-decorator使用手册使用手册
一，安装一，安装
npm i -s vue-property-decorator
二，用法二，用法
1，，@Component(options:ComponentOptions = {})
@Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives 等未提供装饰器的选
项
虽然也可以在 @Component 装饰器中声明 computed，watch 等，但并不推荐这么做，因为在访问 this 时，编译器会给出错
误提示
import { Vue, Component } from 'vue-property-decorator'
@Component({
filters: {
toFixed: (num: number, fix: number = 2) => {
return num.toFixed(fix)
}
}
})
export default class MyComponent extends Vue {
public list: number[] = [0, 1, 2, 3, 4] get evenList() {
return this.list.filter((item: number) => item % 2 === 0)
}
}
2，，@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
@Prop 装饰器接收一个参数，这个参数可以有三种写法：
Constructor ，例如 String，Number，Boolean 等，指定 prop 的类型；
Constructor[] ，指定 prop 的可选类型；
PropOptions ，可以使用以下选项： type，default，required，validator 。
import { Vue, Component, Prop } from 'vue-property-decorator'
@Componentexport default class MyComponent extends Vue {
@Prop(String) propA: string | undefined
@Prop([String, Number]) propB!: string | number
@Prop({
type: String,
default: 'abc'
})
propC!: string
}
等同于下面的 js 写法
export default {
props: {
propA: {
type: Number
},
propB: {
default: 'default value'
},
propC: {
type: [String, Boolean] }
}
}
注意：注意：
属性的ts类型后面需要加上 undefined 类型；或者在属性名后面加上!，表示 非null 和 非undefined
的断言，否则编译器会给出错误提示；
指定默认值必须使用上面例子中的写法，如果直接在属性名后面赋值，会重写这个属性，并且会报错。
资源评论
weixin_466246442023-03-14怎么能有这么好的资源！只能用感激涕零来形容TAT...
weixin_38720050
- 粉丝: 3
- 资源: 876
