Vue-property-decorator relies on the vue-class-Component implementation and mainly uses the internally provided createDecorator method.

If you want to add more decorators, you can also call the createDecorator method, which simply adds the required data to the option object.

Execute the decorator function added by createDecorator

CreateDecorator, a utility function provided in vue-class-Component, allows you to add additional decorator functions, mount them on Component.decorators, and pass in options. Adding the desired properties to options actually calls these decorator functions, giving them a chance to process options.

“Vue-class-component” provides the createDecorator method to create a custom decorator

The createDecorator expects a callback function as its first argument, which receives the following arguments:

  • Options — Vue component options object, changes to which affect supplied components
  • Key – Applies a decorator property or method
  • ParameterIndex — parameterIndex

decorators.ts

import { createDecorator } from "vue-class-component"; export const Log = createDecorator((options: any, key) => { const originalMethod = options.methods[key]; options.methods[key] = function wrapperMethod(... Args: []) {console.log(' call: ${key}(',... args, ")"); originalMethod.apply(this, args); }; });Copy the code

Use method decorator

<template> <div class="about"> <h1>This is an about page</h1> <button @click="hello">Hello</button> </div> </template> <script lang="ts"> import Vue from "vue"; import Component from "vue-class-component"; import { Log } from "./decorators"; @component export default class About extends Vue {mounted() {this.hello(" this is a log"); } @Log hello(value: any) { console.log('hello', value); } } </script>Copy the code

Reprinted from the Vue Class Component custom decorator