Vue-property-decorator Usage Guide

A very useful library for using TypeScript in Vue, which uses decorators to simplify writing.

Install 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)

2, @ Component

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

export default{
    components:{
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // Directive definition
            inserted: function (el) {
                el.focus()
            }
        }
    }
}
Copy the code

Ts writing

import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components';

 @Component({
    components:{
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // Directive definition
            inserted: function (el) {
                el.focus()
            }
        }
    }
})
export default class YourCompoent extends Vue{
   
}
Copy the code

3, @prop between parent and child components

Js writing

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

Ts writing

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'.// Usually String or Number
      // If it is an object or an array. The default value is returned from a factory function
      // defatult: () => {
      // return ['a','b']
      // }
     required: true,
     validator: (value) = > {
        return [
          'InProcess'.'Settled'].indexOf(value) ! = =- 1
     }
    })
    propC:string;
    
    
}
Copy the code

4, @Model (between components, checkbox)

Use the v-Model =”checked” child component in the parent component

<input  type="checkbox" :checked="checked" @change="change">
Copy the code

Js notation == (2.2.0+ new) ==

 export default {
     model: {prop:'checked'.event:'change'
     },
     props: {checked: {type:Boolean}},methods:{
         change(e){
             this.$emit('change', e.target.checked)
         }
     }
 }
Copy the code

Ts writing

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){}
    
}
Copy the code

5, @ Watch

Js writing

export default {
  watch: {
    'person': {
      handler: 'onPersonChanged'.immediate: true.deep: true}},methods: {
    onPersonChanged(val, oldVal) { }
  }
}
Copy the code

Ts writing

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) { }
}
Copy the code

6, @ Emit

Functions defined by @emit $Emit their return value followed by their original arguments. If the return value is a promise, it is parsed before being issued.

If the name of the event is not provided as an event parameter, the function name is used. In this case, the camelCase name is converted to kebab-Case.

Js writing

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((a)= > {
          resolve(20)},0)
      })

      promise.then(value= > {
        this.$emit('promise', value)
      })
    }
  }
}
Copy the code

Ts writing

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((a)= > {
        resolve(20)},0)}}}Copy the code

7, @provide / @inject

Note: the parent component is not convenient to pass data to the child component, so pass the data through Provide, and then the child component obtains the data through Inject

Js writing

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
    }
  }
})
Copy the code

Ts writing

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

Copy the code

Reference: github.com/kaorun343/v…