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

的断言，否则编译器会给出错误提示；

指定默认值必须使用上面例子中的写法，如果直接在属性名后面赋值，会重写这个属性，并且会报错。

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 修饰符使用

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 写法