vuejs / vue-class-component

ES / TypeScript decorator for class-style Vue components.
MIT License
5.81k stars 431 forks source link

Vue typescript component class function decorator can not access extends mixin class method #618

Open chenp1204 opened 2 years ago

chenp1204 commented 2 years ago

Environment version: vue @2.6.13 vue-class-component @7.2.3 vue-property-decorator @9.1.2 typescript @4.1.5

Description:

My vue component class named AudioBarChart,and extends a mixin component class named MaleonComponentMixin,the same time,i define a function decorator named RestTimerDecorator, in the RestTimerDecorator i called the mixin component class's method named resetDataTimer. When i use RestTimerDecorator in component class AudioBarChart's method updateData,

but when call updateData method, RestTimerDecorator inside report a error: "TypeError: target.resetDataTimer is not a function"

the decorator's target not contains it's parent class property ?

import { Component, Vue, Prop, Mixins } from 'vue-property-decorator';

export interface IMaleonComponent {
    updateData(): void;
}

@Component
export class MaleonComponentMixin extends Vue {
    @Prop({ default: false })
    preview!: boolean;

    private autoReq: boolean = false;

    // 启动数据定时器
    startDataTimer() {
      console.log('startDataTimer');
    }

    resetDataTimer() {
      this.autoReq && this.preview && this.startDataTimer();
    }
}

// 装饰器函数
export function RestTimerDecorator() {
  return (target: MaleonComponentMixin, propertyKey: string, descriptor: PropertyDescriptor) => {
    const currentFunc = descriptor.value;
    if (currentFunc && typeof currentFunc === 'function') {
      descriptor.value = (...args: []) => {

        // 在调用updateData之前先重置定时器
        target.resetDataTimer();

        (currentFunc as ()=>void).apply(target, args);
      };
    }
  };
}

@Component
export default class AudioBarChart extends Mixins(MaleonComponentMixin) implements IMaleonComponent {

  @RestTimerDecorator()
  updateData(): void {
    console.log('updateData');
  }
}

test-mixin

image