How to use the vue-property-decorator.Provide function in vue-property-decorator

@Provide()
  private handleToggleOrderMode() {
    this.$emit('toggleOrderMode');
  }

  @Provide()
  private handleToggleLoopMode() {
    this.$emit('toggleLoopMode');
  }

  @Provide()
  private handleTogglePlaylist() {
    this.$emit('togglePlaylist');
  }

  @Provide()
  private handleToggleLyric() {
    this.$emit('toggleLyric');
  }

  @Provide()
  private handleChangeVolume(volume: number) {
    this.$emit('changeVolume', volume);
  }

  @Provide()
  private handleChangeProgress(e: MouseEvent | TouchEvent, percent: number) {
    this.$emit('changeProgress', e, percent);
  }

  private handleMiniSwitcher() {
    this.$emit('miniSwitcher');

private get playIcon(): string {
    return this.aplayer.media.paused ? 'play' : 'pause';
  }

  @Provide()
  private handleTogglePlay() {
    this.$emit('togglePlay');
  }

  @Provide()
  private handleSkipBack() {
    this.$emit('skipBack');
  }

  @Provide()
  private handleSkipForward() {
    this.$emit('skipForward');
  }

  @Provide()
  private handleToggleOrderMode() {
    this.$emit('toggleOrderMode');
  }

  @Provide()
  private handleToggleLoopMode() {
    this.$emit('toggleLoopMode');
  }

  @Provide()
  private handleTogglePlaylist() {

@Provide()
  private handleSkipForward() {
    this.$emit('skipForward');
  }

  @Provide()
  private handleToggleOrderMode() {
    this.$emit('toggleOrderMode');
  }

  @Provide()
  private handleToggleLoopMode() {
    this.$emit('toggleLoopMode');
  }

  @Provide()
  private handleTogglePlaylist() {
    this.$emit('togglePlaylist');
  }

  @Provide()
  private handleToggleLyric() {
    this.$emit('toggleLyric');
  }

  @Provide()
  private handleChangeVolume(volume: number) {
    this.$emit('changeVolume', volume);
  }

  @Provide()
  private handleChangeProgress(e: MouseEvent | TouchEvent, percent: number) {

@Component
export class AssetBundle extends Mixins(AppComponent) {
  @Prop({ type: String, required: true })
  public name!: string;

  @Prop({ type: Boolean, default: false })
  public preload!: boolean;

  @Prop({ type: Number, default: 0 })
  public timeout!: number;

  @Prop({ type: [String, Array], default: () => [] })
  public dependencies!: string | string[];

  @Provide("bundle")
  private provideBundle = Provider.defaultValue();

  private getBundle() {
    return this.m_bundle;
  }

  private m_active = false;
  private m_bundle!: BundleHandle;

  public mounted() {
    this.m_bundle = this.app.assets.bundles.create(this.name);
    this.m_bundle.onLoad.on(this.onLoad);
    this.m_bundle.onUnload.on(this.onUnload);
    this.m_bundle.preload = this.preload;
    this.m_bundle.unloadTimeout = this.timeout;

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

import { CameraFactory, CameraHandle } from "../core";
import { ObjectComponent } from "../mixins";

@Component
export class Camera extends Mixins(ObjectComponent) {
  @Prop({ required: true, type: String })
  private name!: string;

  @Prop({ required: true, type: Function })
  public factory!: CameraFactory;

  @Provide("object")
  public provideObject = this.getObject;

  private m_active = false;
  private m_camera!: CameraHandle;

  public getObject() {
    return this.m_camera.get();
  }

  public onActivate = async () => {
    this.m_active = true;
  };
  public onDeactivate = async () => {
    this.m_active = false;
    await Vue.nextTick();
  };

get versionTooltip() {
        return appManager.version.gitCommit;
    }

    get isAdmin() {
        return this.loginInfo && this.loginInfo.roles.indexOf(ADMIN_ROLE) >= 0;
    }

    /**
     * Adds a new sidebar item to the sidebar.
     * @param id
     * @param text
     * @param click
     */
    @Provide()
    addSidebarItem(
        id: string,
        text: string,
        click: () => void,
        icon: string = null,
        group: string = null
    ) {
        const index = findIndex(this.extraItems, i => i.id === id);
        if (index >= 0) {
            this.extraItems[index] = {
                id: id,
                group: group,
                text: text,
                icon: icon,
                click: click,
            };

public static DefaultHeader = Header;
  public static DefaultShortcut = ShortcutPanel;

  public state = {
    showTimePicker: false,
    timePickerTitle: '',
    startDate: undefined,
    endDate: undefined,
    disConfirmBtn: true,
    clientHeight: 0,
    contentStyle: {},
    visible: this.visible
  };

  @Provide('currentValue')
  public currentValue: Date[] = [];

  @Watch('state', {deep: true})
  public stateChanged(value: any) {
    this.currentValue[0] = value.startDate;
    this.currentValue[1] = value.endDate;
  }

  public created() {
    if (this.defaultValue) {
      const defaultValue = this.defaultValue;
      this.state = {
        ...this.state,
        ...this.selectDate(defaultValue[1], true, {startDate: defaultValue[0]})
      };
    }

import { BundleHandle } from "../core";
import { AppComponent } from "../mixins";
import { stringToArray } from "../utils/toArray";

@Component
export class AssetBundle extends Mixins(AppComponent) {
  @Prop({ type: String, required: true })
  public name!: string;

  @Prop({ type: Boolean, default: false })
  public preload!: boolean;

  @Prop({ type: [String, Array], default: () => [] })
  public dependencies!: string | string[];

  @Provide("bundle")
  private provideBundle = this.getBundle;

  private getBundle() {
    return this.m_bundle;
  }

  private m_active = false;
  private m_bundle!: BundleHandle;

  public mounted() {
    this.m_bundle = this.app().assets.bundles.create(this.name);
    this.m_bundle.onLoad.on(this.onLoad);
    this.m_bundle.onUnload.on(this.onUnload);

    this.m_bundle.preload = this.preload;
  }

export const tableTypeConsumerFactory = ( tableType: TableType ): typeof Vue & ( new() => ITableTypeConsumer ) => {
	/**
	 * This mixin provide a [[TableType]] to inner components, which allow them to access [[Settings]] (through [[TableType.setting]])
	 */
	@Component
	class TableTypeConsumer extends Vue implements ITableTypeConsumer {
		/**
		 * Provide the current [[TableType]] to inner components.
		 *
		 * @vue Provide `table-type`
		 */
		@Provide( 'table-type' )
		public get tableType() {
			return tableType;
		}
	}
	return TableTypeConsumer;
};