一，安裝

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 裝飾器接收一個參數，這個參數可以有三種寫法：

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] } }}

注意：

3，@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})

propName: string 表示父組件傳遞過來的屬性名； 

options: Constructor | Constructor[] | PropOptions 與 @Prop 的第一個參數一致；

@PropSync 會生成一個新的計算屬性。

import { Vue, Component, PropSync } from 'vue-property-decorator'@Componentexport 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) } } }}