This library fully depends on vue-class-component, so please read its README before using this library.
MIT License
npm i -S vue-property-decorator
There are 7 decorators and 1 function (Mixin):
@Emit
@Inject
@Model
@Prop
@Provide
@Watch
@Component
(provided by vue-class-component)Mixins
(the helper function namedmixins
provided by vue-class-component)
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Prop(Number) readonly propA!: number
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC!: string | boolean
}
is equivalent to
export default {
props: {
propA: {
type: Number
},
propB: {
default: 'default value'
},
propC: {
type: [String, Boolean]
},
}
}
Note that:
If you'd like to set type
property of each prop value from its type definition, you can use reflect-metadata.
- Set
emitDecoratorMetadata
totrue
. - Import
reflect-metadata
before importingvue-property-decorator
(importingreflect-metadata
is needed just once.)
It's not supported to define each default
property like @Prop() prop = 'default value
.
import { Vue, Component, Model } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Model('change', { type: Boolean }) readonly checked!: boolean
}
is equivalent to
export default {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: {
type: Boolean
},
},
}
@Model
property can also set type
property from its type definition via reflect-metadata
.
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Watch('child')
onChildChanged(val: string, oldVal: string) { }
@Watch('person', { immediate: true, deep: true })
onPersonChanged1(val: Person, oldVal: Person) { }
@Watch('person')
onPersonChanged2(val: Person, oldVal: Person) { }
}
is equivalent to
export default {
watch: {
'child': [
{
handler: 'onChildChanged',
immediate: false,
deep: false
}
],
'person': [
{
handler: 'onPersonChanged1',
immediate: true,
deep: true
},
{
handler: 'onPersonChanged2',
immediate: false,
deep: false
}
]
},
methods: {
onChildChanged(val, oldVal) { },
onPersonChanged1(val, oldVal) { }
onPersonChanged2(val, oldVal) { }
}
}
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.
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)
})
}
}
is equivalent to
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)
})
}
}
}
@Provide(key?: string | symbol)
/ @Inject(options?: { from?: InjectKey, default?: any } | InjectKey)
decorator
import { Component, Inject, Provide, Vue } from 'vue-property-decorator'
const symbol = Symbol('baz')
@Component
export class MyComponent extends Vue {
@Inject() readonly foo!: string
@Inject('bar') readonly bar!: string
@Inject({ from: 'optional', default: 'default' }) readonly optional!: string
@Inject(symbol) readonly baz!: string
@Provide() foo = 'foo'
@Provide('bar') baz = 'bar'
}
is equivalent to
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
}
}
})