Vue3 Composition API(setup-TS)中如何全局注册自定义模态框组件？

你之前的误区 #

你在vite.config.ts里配置的isCustomElement是用来识别原生Web Components的，不是Vue组件的全局注册方式，这个配置会让Vue把匹配的标签当作原生元素处理，反而会导致Vue组件无法正常渲染，建议先把这段配置删掉。

正确的全局注册步骤 #

假设你的自定义模态框组件路径是src/components/MyModal.vue，按以下步骤操作：

1. 在main.ts中全局注册组件

import { createApp } from 'vue'
import App from './App.vue'
import MyModal from './components/MyModal.vue' // 导入你的模态框组件

const app = createApp(App)
app.component('MyModal', MyModal) // 全局注册，第一个参数是模板中要用的标签名，第二个是组件实例
app.mount('#app')

2. 添加TypeScript类型声明（避免模板报错）
   在项目src文件夹下创建global.d.ts文件，添加以下内容，让TS识别全局组件类型：

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    MyModal: typeof import('./components/MyModal.vue')['default']
  }
}

export {}

3. 直接在任意组件的Setup语法糖中使用
   无需导入组件，直接在模板里用注册的标签名：

<template>
  <button @click="showModal = true">打开模态框</button>
  <MyModal v-model:visible="showModal" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const showModal = ref(false)
</script>

额外说明 #

• 如果你的组件是封装成插件形式（带install方法），可以用app.use(MyModalPlugin)完成注册，本质和app.component逻辑一致。
• 确保组件文件是默认导出，若为命名导出需对应调整导入语句。

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