Vue组合API项目全局函数配置求助：子组件调用报错

你现在的问题是只定义了Modals常量，但没把它注册到Vue的全局上下文里，所以模板里的_ctx找不到这个对象。下面给你几种适配组合API的解决方法：

方法1：用app.config.globalProperties挂载全局属性 #

这是Vue3里最直接的全局挂载方式，逻辑和Vue2的Vue.prototype一致：

1. 在你的app.js里，创建Vue实例后把Modals挂载到全局属性上：

import { createApp } from 'vue';
import App from './App.vue';

const Modals = {
  show(screen) {
    alert(screen);
    // 你的其他逻辑
  },
};

const app = createApp(App);
// 注意：如果模板里用的是`ModalShow.show`，这里要改成`ModalShow`
app.config.globalProperties.Modals = Modals;

app.mount('#app');

2. 模板里直接调用：

<button @click="Modals.show('my-create')">打开弹窗</button>

如果要在组件的setup函数里调用，需要用getCurrentInstance获取全局属性：

import { getCurrentInstance } from 'vue';

setup() {
  const { appContext } = getCurrentInstance();
  const Modals = appContext.config.globalProperties.Modals;
  Modals.show('test');
}

方法2：用provide/inject（组合API推荐方式） #

这种方式更符合组合API的依赖注入思想：

1. 在app.js里全局提供Modals：

import { createApp } from 'vue';
import App from './App.vue';

const Modals = {
  show(screen) {
    alert(screen);
    // 你的其他逻辑
  },
};

const app = createApp(App);
// 全局注入Modals
app.provide('Modals', Modals);

app.mount('#app');

2. 在组件里使用：

<template>
  <button @click="modals.show('my-create')">打开弹窗</button>
</template>

<script setup>
import { inject } from 'vue';
const modals = inject('Modals');
</script>

方法3：封装成Composable函数（最灵活的方式） #

如果你的Modals逻辑比较复杂，推荐封装成可复用的组合式函数：

1. 创建src/composables/useModals.js：

const Modals = {
  show(screen) {
    alert(screen);
    // 你的其他逻辑
  },
};

export function useModals() {
  return Modals;
}

2. 在组件里导入使用：

<template>
  <button @click="modals.show('my-create')">打开弹窗</button>
</template>

<script setup>
import { useModals } from '@/composables/useModals';
const modals = useModals();
</script>

另外要注意：你模板里写的是ModalShow.show，但定义的常量是Modals，这里要保持名称一致——要么把模板里的改成Modals.show，要么把挂载的全局属性名改成ModalShow。

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