Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
chenp1204 opened this issue Jun 23, 2022 · 0 comments

Comments

@chenp1204
Copy link

chenp1204 commented Jun 23, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant