Vue3中注册全局的组件,并且在 TS 中添加全局组件提示
Vue3中注册全局的组件1. 在src/components中新建index.ts用来将所有需要全局注册的组件导入✨: 如果使用的是 JS 可以删除类型校验import type { Component } from 'vue'import SvgIcon from './SvgIcon/index.vue'// ✨如果使用的是 JS 可以删除类型校验const components: {[pro
·
Vue3
中注册全局的组件
1. 在src/components
中新建index.ts
用来将所有需要全局注册的组件导入
✨: 如果使用的是 JS
可以删除类型校验
import type { Component } from 'vue'
import SvgIcon from './SvgIcon/index.vue'
// ✨如果使用的是 JS 可以删除类型校验
const components: {
[propName: string]: Component
} = {
SvgIcon
}
export default components
2. 在main.ts
中导入
✨这里使用循环的方式, 将每个全局组件进行注册
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 基于断点的隐藏类 Element 额外提供了一系列类名,用于在某些条件下隐藏元素
import App from './App.vue'
import router from './router'
import { store, key } from './store'
import globalComponent from '@/components/index'
const app = createApp(App)
app.use(store, key).use(router).use(ElementPlus).mount('#app')
// 注册全局的组件
for (const componentItme in globalComponent) {
app.component(componentItme, globalComponent[componentItme])
}
3. 如果使用TS
编写,还需要在和main.ts
同级的目录, 创建一个components.d.ts
, 用来处理组件引入报错的问题和添加组件提示
import SvgIcon from '@/components/SvgIcon/index.vue'
declare module '@vue/runtime-core' {
export interface GlobalComponents {
SvgIcon: typeof SvgIcon
}
}
4. 最后直接导入即可
更多推荐
已为社区贡献19条内容
所有评论(0)