Vue3无构建环境下，如何从其他组件调用公共组件的makeProgress函数？

针对你的场景（无构建工具、多createApp挂载业务组件、需要调用公共组件内的makeProgress函数），给你几个直接可行的方案：

方案1：把工具函数从组件中抽离（最推荐） #

既然makeProgress是工具类函数，没必要绑定在UI组件里，单独抽离维护更灵活：

1. 新建progress-utils.js文件，将函数独立出来：

// progress-utils.js
// 直接定义函数
function makeProgress(current, total) {
  // 你的进度计算逻辑
  return Math.round((current / total) * 100);
}
// 无构建环境下，挂载到window全局方便调用
window.makeProgress = makeProgress;

2. 在HTML中先引入这个工具文件，再引入业务组件：

<script src="./progress-utils.js"></script>
<script src="./bdggtt.js"></script>
<script src="./readbillSub.js"></script>

3. 业务组件里直接调用：

// bdggtt.js中的组件代码
createApp({
  methods: {
    updateTaskProgress() {
      const currentProgress = makeProgress(30, 100);
      // 后续逻辑处理
    }
  }
}).mount('#bdggtt');

方案2：通过Vue全局属性共享函数 #

如果非要保留progressComponent的结构，可将函数挂载到Vue实例的全局属性上：

1. 在progressComponent.js中暴露函数，并挂载到全局：

// progressComponent.js
export function makeProgress(current, total) {
  // 你的进度计算逻辑
}
// Vue 3 CDN环境下，给每个createApp实例添加全局属性
// 也可以在main.js中统一处理所有实例

2. 在业务组件的实例中绑定并调用：

// readbillSub.js中的组件代码
const app = createApp({
  methods: {
    handleProgressUpdate() {
      const progress = this.$makeProgress(50, 100);
    }
  }
});
// 绑定全局属性
app.config.globalProperties.$makeProgress = makeProgress;
app.mount('#readbillSub');

方案3：将组件实例挂载到全局（不推荐，耦合性高） #

如果progressComponent是需要渲染的UI组件，同时要调用它的方法，可把组件实例挂到window上：

// progressComponent.js
const progressInstance = createApp({
  methods: {
    makeProgress(current, total) {
      // 你的进度计算逻辑
    }
  }
}).mount('#progress-component');

// 暴露实例到全局
window.progressInstance = progressInstance;

业务组件里直接调用：

window.progressInstance.makeProgress(20, 100);

此方法不推荐，会造成全局污染且组件耦合性过强。

另外补充你提到的挂载错误问题：多组件挂载时，每个createApp都是独立的Vue实例，要确保每个实例挂载到不同的DOM节点，比如：

// main.js 正确的多实例挂载方式
createApp(bdggttComponent).mount('#bdggtt-container');
createApp(readbillSubComponent).mount('#readbill-container');

每个挂载目标DOM节点需在HTML中提前存在，不能重复挂载到同一个节点。

内容的提问来源于stack exchange，提问作者joseph son