Vue Property 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 vue-class-component vue

Usage

There are several decorators:

• @Prop
• @Model
• @Watch
• @Provide
• @Inject
• @Emit
• @Ref

Also, these are re-exported from vue-class-component

• @Option
• mixins
• Vue

@Prop decorator

Example

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

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}

Description

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

@Model decorator

Example

1import { Vue, Model } from 'vue-property-decorator'
2
3export default class YourComponent extends Vue {
4  @Model('modelValue', { type: String, default: 'Default Value' })
5  readonly value!: string
6}

is equivalent to

1export default {
2  props: {
3    modelValue: {
4      type: String,
5      default: 'Default Value',
6    },
7    emits: ['update:ModelValue'],
8    computed: {
9      value: {
10        get() {
11          return this.modelValue
12        },
13        set(newValue) {
14          this.$emit('update:modelValue')
15        },
16      },
17    },
18  },
19}

@Watch decorator

Example

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

is equivalent to

1export default {
2  watch: {
3    child: [
4      {
5        handler: 'onChildChanged',
6      },
7    ],
8    person: [
9      {
10        handler: 'onPersonChanged1',
11        immediate: true,
12        deep: true,
13      },
14      {
15        handler: 'onPersonChanged2',
16      },
17    ],
18  },
19  methods: {
20    onChildChanged(val, oldVal) {},
21    onPersonChanged1(val, oldVal) {},
22    onPersonChanged2(val, oldVal) {},
23  },
24}

@Provide decorator

Description

Provided values are automatically wrapped with computed function, so when the values are modified, its child values can receives the new value.

Example

1import { Vue, Provide } from 'vue-property-decorator'
2
3const symbolKey = Symbol()
4
5export class MyComponent extends Vue {
6  @Provide() foo = 'foo'
7  @Provide('bar') baz = 'bar'
8  @Provide(symbolKey) nice = 'nice'
9}

is equivalent to

1import { computed } from 'vue'
2
3const symbolKey = Symbol()
4
5export default {
6  data() {
7    return {
8      foo: 'foo',
9      baz: 'bar',
10      nice: 'nice',
11    }
12  },
13  provide() {
14    return {
15      foo: computed(() => this.foo),
16      bar: computed(() => this.baz),
17      [symbolKey]: computed(() => this.nice),
18    }
19  },
20}

@Inject decorator

Example

1import { Vue, Inject } from 'vue-property-decorator'
2
3export class MyComponent extends Vue {
4  @Inject() foo!: string
5  @Inject({ from: 'bar' }) baz!: string
6  @Inject({ default: '' }) nice!: string
7}

is equivalent to

1export default {
2  inject: {
3    foo: 'foo',
4    baz: {
5      from: 'bar',
6    },
7    nice: {
8      default: '',
9    },
10  },
11}

@Emit decorator

Description

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.

Example

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 decorator

Example

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

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}