vue-property-decorator的裝飾器及其功能（可能不全）

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