Vue Class Component 自定义装饰器
Vue Class Component 自定义装饰器
Custom Decorators
你可以通过创建自己的装饰器(decorators)来扩展此库的功能。
"Vue-Class-Component"提供了createDecorator方法来创建自定义的装饰器
createDecorator期望一个回调函数作为第一参数,这个回调函数将收到以下参数:
- options —— Vue组件选项对象,此对象的更改将影响所提供的组件
- key —— 应用装饰器的属性或方法
- parameterIndex —— 参数索引
Example
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(`调用: ${key}(`, ...args, ")"); originalMethod.apply(this, args); }; });
在About.vue使用方法装饰器
<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("这是一个log"); } @Log hello(value: any) { console.log('hello', value); } } </script>
输出结果: