vue-property-decorator使用指南

在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
 
         }
 
     })
 
 }
 
}