vue-property-decorator使用指南

在Vue中使用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({
    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

}

等同于下面的 js 写法

export default {
    props: {
        propA: {
            type: Number
        },
        propB: {
            default: 'default value'
        },

        propC: {
            type: [String, Boolean]
        }
    }
}

注意：

• 属性的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

}

等同于下面的 js 写法

export default {

 props: {
     propA: {
         type: String,
         default: 'abc'
     }
 },

 computed: {
     syncedPropA: {
        get() {
            return this.propA
        },
        set(value) {
            this.$emit('update:propA', value)
        }
     }
 }
}

注意： @PropSync 需要配合父组件的 .sync 修饰符使用

 

在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
示例代码如下：

<comp :foo.sync="bar"></comp>

会被扩展为：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

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

}

等同于下面的 js 写法

export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: String,
            default: '123'
        }
    }
}

上面例子中指定的是 change 事件，所以我们还需要在 template 中加上相应的事件：

<template>

 <input

 type="text"

 :value="value"

 @change="$emit('change', $event.target.value)"

 />

</template>

对 自定义v-model 不太理解的同学，可以查看 自定义事件

 

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[]) {}

}

等同于下面的 js 写法

export default {
    watch: {
        msg: [
          {
            handler: 'onMsgChanged',
            immediate: false,
            deep: false
          }
        ],
        arr: [
          {
            handler: 'onArrChanged1',
            immediate: true,
            deep: true
          },
          {
            handler: 'onArrChanged2',
            immediate: false,
            deep: false
          }
        ]
    },
    methods: {
        onMsgVhanged(newValue, oldValue) {},
        onArrChange1(newValue, oldValue) {},
        onArrChange2(newValue, oldValue) {}
    }
}

6、@Emit(event?: string)

• @Emit 装饰器接收一个可选参数，该参数是 $Emit 的第一个参数，充当事件名。如果没有提供这个参数， $Emit 会将回调函数名的 camelCase 转为 kebab-case ，并将其作为事件名；
• @Emit 会将回调函数的返回值作为第二个参数，如果返回值是一个 Promise 对象， $emit 会在 Promise 对象被标记为 resolved 之后触发；
• @Emit 的回调函数的参数，会放在其返回值之后，一起被 $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)
    })
 }
}

等同于下面的 js 写法

export default {

 data() {

 return {

 count: 0

 }

 },

 methods: {

 addToCount(n) {

 this.count += n

 this.$emit('add-to-count', n)

 },

 resetCount() {

 this.count = 0

 this.$emit('reset')

 },

 returnValue() {

 this.$emit('return-value', 10)

 },

 onInputChange(e) {

 this.$emit('on-input-change', e.target.value, e)

 },

 promise() {

 const promise = new Promise(resolve => {

 setTimeout(() => {

  resolve(20)

 }, 0)

 })

 promise.then(value => {

 this.$emit('promise', value)

 })

 }

 }

}

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

         }

     })

 }

}

等同于下面的 js 写法

export default {

 computed: {

 loginForm: {

 cache: false,

 get() {

 return this.$refs.loginForm

 }

 },

 passwordForm: {

 cache: false,

 get() {

 return this.$refs.changePasswordForm

 }

 }

 }

}

@Provide/@Inject 和 @ProvideReactive/@InhectReactive

由于平时基本不用到provide/inject选项，暂时先放着，之后再补充