[Vue + TS] Create your own Decorators in Vue with TypeScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

We’ve used @Watch, @Inject and more decorators from vue-property-decorator. In this lesson however we will guide you through creating your own decorators in order to add common functionality to your Vue components using TypeScript.

Import:

import {createDecorator} from 'vue-class-component'

Define a decorator:

const Log = (msg) => {
return createDecorator((component, key) => {
console.log("#Component", component);
console.log("#Key", key); //log
console.log("#Msg", msg); //App
})
}

Using it:

@Log('fullMessage get called')
get fullMessage() {
return `${this.message} from Typescript`
}

Output:

#Component Object {directives: Object, components: Object, name: "Hello", methods: Object, computed: Object…}
#Key fullMessage
#Msg fullMessage get called