[DEPRECATED] Vue Property Decorator

⚠️ Notice

This library is no longer actively maintained. If you still want to use classes, check out the community-maintained project vue-facing-decorator.

---

This library fully depends on vue-class-component, so please read its README before using this library.

License

MIT License

Install

1npm i -S vue-property-decorator

Usage

There are several decorators and 1 function (Mixin):

• @Prop
• @PropSync
• @Model
• @ModelSync
• @Watch
• @Provide
• @Inject
• @ProvideReactive
• @InjectReactive
• @Emit
• @Ref
• @VModel
• @Component (provided by vue-class-component)
• Mixins (the helper function named mixins provided by vue-class-component)

See also

vuex-class

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

1import { Vue, Component, Prop } from 'vue-property-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  @Prop(Number) readonly propA: number | undefined
6  @Prop({ default: 'default value' }) readonly propB!: string
7  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
8}

is equivalent to

1export default {
2  props: {
3    propA: {
4      type: Number,
5    },
6    propB: {
7      default: 'default value',
8    },
9    propC: {
10      type: [String, Boolean],
11    },
12  },
13}

If you'd like to set type property of each prop value from its type definition, you can use reflect-metadata.

1. Set emitDecoratorMetadata to true.
2. Import reflect-metadata before importing vue-property-decorator (importing reflect-metadata is needed just once.)

1import 'reflect-metadata'
2import { Vue, Component, Prop } from 'vue-property-decorator'
3
4@Component
5export default class MyComponent extends Vue {
6  @Prop() age!: number
7}

Each prop's default value need to be defined as same as the example code shown in above.

It's not supported to define each default property like @Prop() prop = 'default value' .

@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator

1import { Vue, Component, PropSync } from 'vue-property-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  @PropSync('name', { type: String }) syncedName!: string
6}

is equivalent to

1export default {
2  props: {
3    name: {
4      type: String,
5    },
6  },
7  computed: {
8    syncedName: {
9      get() {
10        return this.name
11      },
12      set(value) {
13        this.$emit('update:name', value)
14      },
15    },
16  },
17}

@PropSync works like @Prop besides the fact that it takes the propName as an argument of the decorator, and also creates a computed getter and setter behind the scenes. This way you can interface with the property as if it was a regular data property whilst making it as easy as appending the .sync modifier in the parent component.

@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator

1import { Vue, Component, Model } from 'vue-property-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  @Model('change', { type: Boolean }) readonly checked!: boolean
6}

is equivalent to

1export default {
2  model: {
3    prop: 'checked',
4    event: 'change',
5  },
6  props: {
7    checked: {
8      type: Boolean,
9    },
10  },
11}

@Model property can also set type property from its type definition via reflect-metadata .

@ModelSync(propName: string, event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator

1import { Vue, Component, ModelSync } from 'vue-property-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  @ModelSync('checked', 'change', { type: Boolean })
6  readonly checkedValue!: boolean
7}

is equivalent to

1export default {
2  model: {
3    prop: 'checked',
4    event: 'change',
5  },
6  props: {
7    checked: {
8      type: Boolean,
9    },
10  },
11  computed: {
12    checkedValue: {
13      get() {
14        return this.checked
15      },
16      set(value) {
17        this.$emit('change', value)
18      },
19    },
20  },
21}

@ModelSync property can also set type property from its type definition via reflect-metadata .

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

1import { Vue, Component, Watch } from 'vue-property-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  @Watch('child')
6  onChildChanged(val: string, oldVal: string) {}
7
8  @Watch('person', { immediate: true, deep: true })
9  onPersonChanged1(val: Person, oldVal: Person) {}
10
11  @Watch('person')
12  onPersonChanged2(val: Person, oldVal: Person) {}
13
14  @Watch('person')
15  @Watch('child')
16  onPersonAndChildChanged() {}
17}

is equivalent to

1export default {
2  watch: {
3    child: [
4      {
5        handler: 'onChildChanged',
6        immediate: false,
7        deep: false,
8      },
9      {
10        handler: 'onPersonAndChildChanged',
11        immediate: false,
12        deep: false,
13      },
14    ],
15    person: [
16      {
17        handler: 'onPersonChanged1',
18        immediate: true,
19        deep: true,
20      },
21      {
22        handler: 'onPersonChanged2',
23        immediate: false,
24        deep: false,
25      },
26      {
27        handler: 'onPersonAndChildChanged',
28        immediate: false,
29        deep: false,
30      },
31    ],
32  },
33  methods: {
34    onChildChanged(val, oldVal) {},
35    onPersonChanged1(val, oldVal) {},
36    onPersonChanged2(val, oldVal) {},
37    onPersonAndChildChanged() {},
38  },
39}

@Provide(key?: string | symbol) / @Inject(options?: { from?: InjectKey, default?: any } | InjectKey) decorator

1import { Component, Inject, Provide, Vue } from 'vue-property-decorator'
2
3const symbol = Symbol('baz')
4
5@Component
6export class MyComponent extends Vue {
7  @Inject() readonly foo!: string
8  @Inject('bar') readonly bar!: string
9  @Inject({ from: 'optional', default: 'default' }) readonly optional!: string
10  @Inject(symbol) readonly baz!: string
11
12  @Provide() foo = 'foo'
13  @Provide('bar') baz = 'bar'
14}

is equivalent to

1const symbol = Symbol('baz')
2
3export const MyComponent = Vue.extend({
4  inject: {
5    foo: 'foo',
6    bar: 'bar',
7    optional: { from: 'optional', default: 'default' },
8    baz: symbol,
9  },
10  data() {
11    return {
12      foo: 'foo',
13      baz: 'bar',
14    }
15  },
16  provide() {
17    return {
18      foo: this.foo,
19      bar: this.baz,
20    }
21  },
22})

@ProvideReactive(key?: string | symbol) / @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey) decorator

These decorators are reactive version of @Provide and @Inject. If a provided value is modified by parent component, then the child component can catch this modification.

1const key = Symbol()
2@Component
3class ParentComponent extends Vue {
4  @ProvideReactive() one = 'value'
5  @ProvideReactive(key) two = 'value'
6}
7
8@Component
9class ChildComponent extends Vue {
10  @InjectReactive() one!: string
11  @InjectReactive(key) two!: string
12}

@Emit(event?: string) decorator

The functions decorated by @Emit $emit their return value followed by their original arguments. If the return value is a promise, it is resolved before being emitted.

If the name of the event is not supplied via the event argument, the function name is used instead. In that case, the camelCase name will be converted to kebab-case.

1import { Vue, Component, Emit } from 'vue-property-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  count = 0
6
7  @Emit()
8  addToCount(n: number) {
9    this.count += n
10  }
11
12  @Emit('reset')
13  resetCount() {
14    this.count = 0
15  }
16
17  @Emit()
18  returnValue() {
19    return 10
20  }
21
22  @Emit()
23  onInputChange(e) {
24    return e.target.value
25  }
26
27  @Emit()
28  promise() {
29    return new Promise((resolve) => {
30      setTimeout(() => {
31        resolve(20)
32      }, 0)
33    })
34  }
35}

is equivalent to

1export default {
2  data() {
3    return {
4      count: 0,
5    }
6  },
7  methods: {
8    addToCount(n) {
9      this.count += n
10      this.$emit('add-to-count', n)
11    },
12    resetCount() {
13      this.count = 0
14      this.$emit('reset')
15    },
16    returnValue() {
17      this.$emit('return-value', 10)
18    },
19    onInputChange(e) {
20      this.$emit('on-input-change', e.target.value, e)
21    },
22    promise() {
23      const promise = new Promise((resolve) => {
24        setTimeout(() => {
25          resolve(20)
26        }, 0)
27      })
28
29      promise.then((value) => {
30        this.$emit('promise', value)
31      })
32    },
33  },
34}

@Ref(refKey?: string) decorator

1import { Vue, Component, Ref } from 'vue-property-decorator'
2
3import AnotherComponent from '@/path/to/another-component.vue'
4
5@Component
6export default class YourComponent extends Vue {
7  @Ref() readonly anotherComponent!: AnotherComponent
8  @Ref('aButton') readonly button!: HTMLButtonElement
9}

is equivalent to

1export default {
2  computed() {
3    anotherComponent: {
4      cache: false,
5      get() {
6        return this.$refs.anotherComponent as AnotherComponent
7      }
8    },
9    button: {
10      cache: false,
11      get() {
12        return this.$refs.aButton as HTMLButtonElement
13      }
14    }
15  }
16}

@VModel(propsArgs?: PropOptions) decorator

1import { Vue, Component, VModel } from 'vue-property-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  @VModel({ type: String }) name!: string
6}

is equivalent to

1export default {
2  props: {
3    value: {
4      type: String,
5    },
6  },
7  computed: {
8    name: {
9      get() {
10        return this.value
11      },
12      set(value) {
13        this.$emit('input', value)
14      },
15    },
16  },
17}