vue-property-decorator具備以下幾個裝飾器和功能：

1.@Component(options:ComponentOptions = {})

@Component裝飾器可以接收一個物件作為引數，可以在物件中宣告components,filters,directives等未提供裝飾器的選項，也可以宣告computed,watch等

registerHooks:

除了上面介紹的將beforeRouteLeave放在Component中之外，還可以全域性註冊，就是registerHooks。

ps:即使沒有元件也不能省略@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) = {})

我們在使用Vue時有時會遇到子元件接收父元件傳遞來的引數.

@Prop裝飾器接收一個引數，這個引數可以有三種寫法：

Constructor,例如String,Number,Boolean等，指定prop的型別；

Constructor[],指定prop的可選型別

PropOptions，可以使用以下選項:type,default,required,validator(驗證器).

注意:屬性的ts型別後面需要加上undefined型別;或者在屬性名後面加上!，表示非null和非undefined的斷言

import { Vue, Component, Prop } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
 @Prop(Number) readonly propA: number | undefined
 @Prop({ default: 'default value' }) readonly propB!: string
 @Prop([String, Boolean]) readonly propC: string | boolean | undefined
​
　　@Prop([String,Number]) propB:string|number; 
　　@Prop({ 
　　　　type: String,// type: [String , Number] 
　　　　default: 'default value', // 一般為String或Number 
　　　　//如果是物件或陣列的話。預設值從一個工廠函式中返回 
　　　　// defatult: () => { 
　　　　　　// return ['a','b'] 
　　　　// } 
　　　　required: true,
　　　　 validator: (value) => { return [ 'InProcess', 'Settled' ].indexOf(value) !== -1 } }) propC:string;
}
 

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

@PropSync裝飾器與@prop用法類似，兩者的區別在於：

• @PropSync裝飾器接收2個引數：

propName: string表示父元件傳遞過來的屬性名;

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

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

注意，使用PropSync的時候是要在父元件配合.sync使用的

子元件中值發生變化會雙向繫結修改父元件的值

// 父元件
<template>
 <div class="PropSync">
  <h1>父元件</h1>
   like:{{like}}
  <hr/>
  <PropSyncComponent :like.sync="like"></PropSyncComponent>
 </div>
</template>
 
<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';
import PropSyncComponent from '@/components/PropSyncComponent.vue';
 
@Component({components: { PropSyncComponent },})
export default class PropSyncPage extends Vue {
 private like = '父元件的like';
}
</script>
 
// 子元件
<template>
 <div class="hello">
  <h1>子元件:</h1>
  <h2>syncedlike:{{ syncedlike }}</h2>
  <button @click="editLike()">修改like</button>
 </div>
</template>
 
<script lang="ts">
import { Component, Prop, Vue, PropSync,} from 'vue-property-decorator';
 
@Component
export default class PropSyncComponent extends Vue {
 @PropSync('like', { type: String }) syncedlike!: string; // 用來實現元件的雙向繫結,子元件可以更改父元件穿過來的值
 
 editLike(): void {
  this.syncedlike = '子元件修改過後的syncedlike!'; // 雙向繫結,更改syncedlike會更改父元件的like
  }
}
</script>

@Provide、@Inject提供一個父子元件以及兄弟元件的一種傳遞資料的方式，父子元件傳遞資料的實現方式：

父元件

import { Component, Provide, Vue } from 'vue-property-decorator'
​
@Component
export class Parent extends Vue {
 @Provide('foo') foo = 'foo';
 @Provide('bar') baz = 'bar';
}

子元件

import { Component, Inject, Vue } from 'vue-property-decorator'
​
@Component
export class Parent extends Vue {
 @Inject() readonly foo!: string;
 @Inject() readonly baz !: string;
}

4.@Model(event?:string,options:(PropOptions | Constructor[] | Constructor) = {})

@Model()在元件上自定義v-model語法糖，接收兩個引數event:string事件名,options同@Prop的引數

@Model('change',{type:string}) readonly name!:string;

@ModelSync()語法用法同@Model,不同的是接收三個引數，引數一為父元件應用處傳遞的引數名，引數二為event事件名，引數三位options，@ModelSync()生成返回一個新的雙向繫結計算屬性

@ModelSync('checked','change',{type:Boolean})

readonly checkedValue!:boolean;

@Watch()接收兩個引數，引數一為監聽的屬性名，引數二為一個物件

{immediate?: boolean, deep?:boolean}第一個表示監聽開始後是否立即呼叫回撥函式，第二個表示監聽的屬性變化時是否呼叫回撥函式

@Watch('name')

onNameChanged(newVal:string, oldVal: string){}

@Emit()接收一個可選引數為第一個廣播的事件名引數，如果沒有提供該引數會將回調函式名的駝峰寫法轉化為中劃線的寫法作為廣播觸發的事件名@Emit會將回調函式的返回值作為第二個引數，如果返回值為一個Promise物件，emit會在Promise-resolved後觸發

@Emit('del') private delEmit(e: MouseEvent){}

@Emit()//省略引數將使用回撥函式名，轉化為中劃線@add-data

addData(data: any){return '';}//如果此處不return，則使用函式引數data