在Vue3.x中使用TypeScript时，非常好用的一个库，使用装饰器来简化书写
一、安装
npm i -S vue-property-decorator
@Prop
@PropSync
@Provide
@Model
@Watch
@Inject
@Provide
@Emit
@Component (provided by vue-class-component)
Mixins (the helper function named mixins provided by vue-class-component)
二、用法
1、@Component(options:ComponentOptions = {})
@Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives 等未提供装饰器的选项，虽然也可以在 @Component 装饰器中声明 computed，watch 等，但并不推荐这么做，因为在访问 this 时，编译器会给出错误提示，即使没有组件也不能省略@Component，否则会报错。
import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components';
@Component({
name:"name",
components:{
componentA,
componentB,
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
})
export default class YourCompoent extends Vue{
}
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
}
注意：属性的ts类型后面需要加上 undefined 类型；或者在属性名后面加上!，表示 非null 和 非undefined的断言，否则编译器会给出错误提示；指定默认值必须使用上面例子中的写法，如果直接在属性名后面赋值，会重写这个属性，并且会报错。
3.@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})
@PropSync 装饰器与 @prop 用法类似，二者的区别在于：
@PropSync 装饰器接收两个参数：
propName: string 表示父组件传递过来的属性名；
options: Constructor | Constructor[] | PropOptions 与 @Prop 的第一个参数一致；
@PropSync 会生成一个新的计算属性。
import { Vue, Component, PropSync } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
@PropSync('propA', { type: String, default: 'abc' }) syncedPropA!: string
}
注意： @PropSync 需要配合父组件的 .sync 修饰符使用
4.@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
@Model 装饰器允许我们在一个组件上自定义 v-model ，接收两个参数：
event: string 事件名。
options: Constructor | Constructor[] | PropOptions 与 @Prop 的第一个参数一致。
import { Vue, Component, Model } from 'vue-property-decorator'
@Component
export default class MyInput extends Vue {
@Model('change', { type: String, default: '123' }) value!: string
}
5.@Watch(path: string, options: WatchOptions = {})
@Watch 装饰器接收两个参数：
path: string 被侦听的属性名；
options?: WatchOptions={} options 可以包含两个属性 ：
immediate?:boolean 侦听开始之后是否立即调用该回调函数；
deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数；
侦听开始，发生在 beforeCreate 勾子之后， created 勾子之前
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class MyInput extends Vue {
@Watch('msg')
onMsgChanged(newValue: string, oldValue: string) {}
@Watch('arr', { immediate: true, deep: true })
onArrChanged1(newValue: number[], oldValue: number[]) {}
@Watch('arr')
onArrChanged2(newValue: number[], oldValue: number[]) {}
}
6、@Emit(event?: string)
@Emit 装饰器接收一个可选参数，该参数是Emit 会将回调函数名的 camelCase 转为 kebab-case ，并将其作为事件名；
@Emit 会将回调函数的返回值作为第二个参数，如果返回值是一个 Promise 对象，emit 当做参数使用。
import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
count = 0
@Emit()
addToCount(n: number) {
this.count += n
}
@Emit('reset')
resetCount() {
this.count = 0
}
@Emit()
returnValue() {
return 10
}
@Emit()
onInputChange(e) {
return e.target.value
}
@Emit()
promise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}
7、@Ref(refKey?: string)
@Ref 装饰器接收一个可选参数，用来指向元素或子组件的引用信息。如果没有提供这个参数，会使用装饰器后面的属性名充当参数
import { Vue, Component, Ref } from 'vue-property-decorator'
import { Form } from 'element-ui'
@Componentexport default class MyComponent extends Vue {
@Ref() readonly loginForm!: Form
@Ref('changePasswordForm') readonly passwordForm!: Form
public handleLogin() {
this.loginForm.validate(valide => {
if (valide) {
// login...
} else {
// error tips
}
})
}
}
