能否在Vue插件中调用组件内的方法与数据？技术咨询

需求：希望在Vue插件中访问自定义组件的data数据或methods方法，尝试过eventBus、Mixin均未成功，询问实现可能性。

自定义组件代码（ProgressCircular.vue） #

<template>
  <div>
    <v-overlay :value="isProcessing">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class ProgressCircular extends Vue {
  private isProcessing: boolean = false;

  startProcess() {
    this.isProcessing = true;
  }
}
</script>

插件源代码 #

import ProgressCircular from '@/components/ProgressCircular.vue';
import { VueConstructor } from 'vue';
import Vuetify from 'vuetify/lib';
import vuetify from './vuetify';

export default {
  install(Vue: VueConstructor, options: any = {}) {
    Vue.use(Vuetify);
    options.vuetify = vuetify;
    Vue.component('progress-circular', ProgressCircular);
    Vue.prototype.$fireProgressing = function () {
      // 尝试调用组件方法失败
      // ProgressCircular.startProcess();
    };
  },
};

可行实现方案 #

方案1：全局挂载组件实例

直接在插件中创建组件实例并挂载到全局，即可直接调用实例方法：

import ProgressCircular from '@/components/ProgressCircular.vue';
import { VueConstructor } from 'vue';
import Vuetify from 'vuetify/lib';
import vuetify from './vuetify';

export default {
  install(Vue: VueConstructor, options: any = {}) {
    Vue.use(Vuetify);
    options.vuetify = vuetify;
    Vue.component('progress-circular', ProgressCircular);

    // 创建组件实例并挂载到Vue原型
    const progressInstance = new ProgressCircular({ vuetify });
    Vue.prototype.$progressInstance = progressInstance;

    Vue.prototype.$fireProgressing = function () {
      progressInstance.startProcess();
    };
  },
};

注：Vue3环境需改用createApp创建实例，通过app.config.globalProperties挂载全局属性

方案2：修正全局事件总线用法

让组件监听全局事件，插件通过触发事件调用组件方法：

1. 修改组件代码，添加事件监听：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class ProgressCircular extends Vue {
  private isProcessing: boolean = false;

  mounted() {
    // 监听全局启动事件
    this.$root.$on('trigger-progress-start', this.startProcess);
  }

  beforeDestroy() {
    // 销毁组件时移除监听，避免内存泄漏
    this.$root.$off('trigger-progress-start', this.startProcess);
  }

  startProcess() {
    this.isProcessing = true;
  }
}
</script>

2. 修改插件代码，触发全局事件：

export default {
  install(Vue: VueConstructor, options: any = {}) {
    Vue.use(Vuetify);
    options.vuetify = vuetify;
    Vue.component('progress-circular', ProgressCircular);

    Vue.prototype.$fireProgressing = function () {
      // 触发全局事件
      this.$root.$emit('trigger-progress-start');
    };
  },
};

方案3：抽离状态管理，封装全局API

把组件状态和逻辑抽离为独立模块，插件直接操作状态，组件响应状态变化：

1. 创建状态管理文件（progressState.ts）：

import Vue from 'vue';

// 可响应的全局状态
export const progressState = Vue.observable({
  isProcessing: false
});

// 封装操作API
export const progressApi = {
  startProcess() {
    progressState.isProcessing = true;
  },
  stopProcess() {
    progressState.isProcessing = false;
  }
};

2. 修改组件代码，绑定状态：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { progressState } from './progressState';

@Component
export default class ProgressCircular extends Vue {
  // 通过计算属性绑定全局状态
  get isProcessing() {
    return progressState.isProcessing;
  }
}
</script>

3. 修改插件代码，暴露API：

import { progressApi } from './progressState';
import ProgressCircular from '@/components/ProgressCircular.vue';
import { VueConstructor } from 'vue';
import Vuetify from 'vuetify/lib';
import vuetify from './vuetify';

export default {
  install(Vue: VueConstructor, options: any = {}) {
    Vue.use(Vuetify);
    options.vuetify = vuetify;
    Vue.component('progress-circular', ProgressCircular);

    // 挂载封装好的API到Vue原型
    Vue.prototype.$fireProgressing = progressApi.startProcess;
    Vue.prototype.$stopProgressing = progressApi.stopProcess;
  },
};

内容的提问来源于stack exchange，提问作者Joonseo Lee