vue-property-decorator使用指南

在Vue中使用TypeScript時，非常好用的一個庫，使用裝飾器來簡化書寫。

1、安裝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)

2、@Component

即使沒有組件也不能省略@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{
   
}

3、@Prop 父子組件之間值的傳遞

@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) decorator

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;

}

注意title參數中的感嘆號。如果需要設置為true或者有默認道具，我只使用它。如果沒有，那么你應該使用| undefined。

“明確的賦值斷言是一個特性，允許在實例屬性和變量聲明之后放置！以向TypeScript傳遞一個變量確實被分配用於所有意圖和目的，即使TypeScript的分析無法檢測到它。”

@Componentexport default class MyComponent extends Vue {
  @Prop({ required: true }) title!: string
  @Prop() optionalItem: string|undefined
}

4、@Emit

@Emit(event?: string) decorator

import { Vue, Component, Emit } from 'vue-property-decorator'
 
@Component
export default class YourComponent 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)
    })
  }
}

5、@Watch

@Watch(path: string, options: WatchOptions = {}) decorator

import { Vue, Component, Watch } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}
 
  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}
 
  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) {}
}

其它詳見文檔