如何定义封装全局组件

2024-01-07 23:16:33

这里以封装的svg组件为例

在src文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件！！！

import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
const components: { [name: string]: Component } = { SvgIcon };
export default {
? ? install(app: App) {
? ? ? ? Object.keys(components).forEach((key: string) => {
? ? ? ? ? ? app.component(key, components[key]);
? ? ? ? })
? ? }
}

在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件

import gloablComponent from './components/index';
app.use(gloablComponent);
//当执行use方法时就会去指定引入的ts文件中暴露出来的install方法，这个方法会把这里的app对象传递过去，那么注册全局组件就可以通过app.component(组件名, 具体的组件来实现);以后我们有新的全局组件只需要在这个index.ts文件中，引入对应的组件，加入对应的components对象中即可

?

文章来源:https://blog.csdn.net/weixin_59244784/article/details/135398762
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。