vue-property-decorator使用指南

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

一、安裝npm install --save vue-property-decorator

• @Component (from vue-class-component)
• @Prop
• @Model
• @Watch
• @Emit
• @Inject
• @Provide
• Mixins (the helper function named mixins defined at vue-class-component)

二、@Component

import {componentA,componentB} from '@/components';

export default{
    components:{
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // 指令的定義
            inserted: function (el) {
                el.focus()
            }
        }
    }
}
複製代碼

ts寫法

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{
   
}
複製代碼

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

js寫法

export default{
    props:{
        propA:String, // propA:Number
        propB:[String,Number],
        propC:{
            type:Array,
            default:()=>{
                return ['a','b']
            },
            required: true,
            validator:(value) => {
                return [
                    'a',
                    'b'
                 ].indexOf(value) !== -1
        }
    }
}
}
複製代碼

ts寫法

import {Component,Vue,Prop} from vue-property-decorator;

@Component
export default class YourComponent extends Vue {
    @Prop(String)
    propA:string;
    
    @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;
    
    
}
複製代碼

四、@Model (組件之間，checkbox)

父組件中使用 v-model="checked" 子組件

<input  type="checkbox" :checked="checked" @change="change">
複製代碼

js寫法 ==（2.2.0+ 新增）==

export default {
     model:{
         prop:'checked',
         event:'change'
     },
     props:{
         checked:{
             type:Boolean
         }
     },
     methods:{
         change(e){
             this.$emit('change', e.target.checked)
         }
     }
 }
複製代碼

ts寫法

import {Vue,Component,Model,Emit} from 'vue-property-decorator';

@Component
export default class YourComponent extends Vue{

    @Model('change',{
        type:Boolean
    })
    checked!:boolean;
    
    @Emit('change')
    change(e:MouseEvent){}
    
}
複製代碼

五、@Watch

js寫法

export default {
  watch: {
    'person': {
      handler: 'onPersonChanged',
      immediate: true,
      deep: true
    }
  },
  methods: {
    onPersonChanged(val, oldVal) { }
  }
}
複製代碼

ts寫法

import {Vue, Component, Watch} from 'vue-property-decorator';

@Component
export default class YourComponent extends Vue{
    @Watch('person', { immediate: true, deep: true })
    onPersonChanged(val: Person, oldVal: Person) { }
}
複製代碼

六、@Emit

由@Emit $emit 定義的函數發出它們的返回值，後跟它們的原始參數。 若是返回值是promise，則在發出以前將其解析。

若是事件的名稱未經過事件參數提供，則使用函數名稱。 在這種狀況下，camelCase名稱將轉換爲kebab-case。

js寫法

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0
      this.$emit('reset')
    },
    returnValue() {
      this.$emit('return-value', 10)
    },
    promise() {
      const promise = new Promise(resolve => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      })

      promise.then(value => {
        this.$emit('promise', value)
      })
    }
  }
}
複製代碼

ts寫法

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()
  promise() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}

複製代碼

七、@Provide 提供 / @Inject 注入

注：父組件不便於向子組件傳遞數據，就把數據經過Provide傳遞下去，而後子組件經過Inject來獲取

js寫法

const symbol = Symbol('baz')

export const MyComponent = Vue.extend({

  inject: {
    foo: 'foo',
    bar: 'bar',
    'optional': { from: 'optional', default: 'default' },
    [symbol]: symbol
  },
  data () {
    return {
      foo: 'foo',
      baz: 'bar'
    }
  },
  provide () {
    return {
      foo: this.foo,
      bar: this.baz
    }
  }
})
複製代碼

ts寫法

import {Vue,Component,Inject,Provide} from 'vue-property-decorator';

const symbol = Symbol('baz')

@Component
export defalut class MyComponent extends Vue{
    @Inject()
    foo!: string;
    
    @Inject('bar')
    bar!: string;
    
    @Inject({
        from:'optional',
        default:'default'
    })
    optional!: string;
    
    @Inject(symbol)
    baz!: string;
    
    @Provide()
    foo = 'foo'
    
    @Provide('bar')
    baz = 'bar'
}

複製代碼

參考內容：github.com/kaorun343/v…