dcy0701 / vue-property-decorator

Vue.js and Property Decorator

@hfe/mta-vue-decorators

This library fully depends on vue-class-component.

License

MIT License

Install

yarn add @hfe/mta-vue-decorators

Usage

There are 6 decorators:

• @Emit
• @Inject
• @Provide
• @Prop
• @On
• @Once
• @Watch
• @Component (exported from vue-class-component)
• mixins (exported from vue-class-component)

import { Component, Emit, Prop, Vue, Watch } from '@hfe/mta-vue-decorators'

@Component
export class MyComponent extends Vue {
  @Emit()
  addToCount(n: number){ this.count += n }

  @Emit('reset')
  resetCount(){ this.count = 0 }

  @On('receive')
  receiveCb (data){ console.log('i m child, received it', data) }

  @Prop()
  propA: number

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Provide() foo = 'foo'
  @Provide('bar') baz = 'bar'

  @Inject() foo: string
  @Inject('bar') bar: string

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged(val: Person, oldVal: Person) { }
}

is equivalent to

export const MyComponent = Vue.extend({
  name: 'MyComponent',
  inject: {
    foo: 'foo',
    bar: 'bar',
  },
  provide () {
    return {
      foo: this.foo,
      bar: this.baz
    }
  },
  props: {
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
  },
  methods: {
    addToCount(n){
      this.count += n
      this.$emit("add-to-count", n)
    },
    resetCount(){
      this.count = 0
      this.$emit("reset")
    },
    onChildChanged(val, oldVal) { },
    onPersonChanged(val, oldVal) { }
  },
  created () {
      this.$on('receive', function receiveCb (data) {
          console.log('i m child, received it', data)
      })
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    },
    'person': {
      handler: 'onPersonChanged',
      immediate: true,
      deep: true
    }
  }
})

emitDecoratorMetadata (if you use typescript)

As you can see at propA and propB, the type can be inferred automatically when it's a simple type. For more complex types like enums you do need to specify it specifically. Also this library needs to have emitDecoratorMetadata set to true for this to work.

See also

vuex-class

TODO

• @Lifecycle
• Vuex的定义文件，比如@getter等