如何定义封装全局组件

这里以封装的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对象中即可

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/597473.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3D 纹理的综合指南

在线工具推荐:3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 我们经常看到超现实主义的视频游戏和动画电影角色出现在屏幕上。他们皮肤上的…

【Redux】自己动手实现redux和react-redux

1. React提供context的作用 在class组件的世界里,如果后代组件共享某些状态,比如主题色、语言键,则需要将这些状态提升到根组件,以props的方式从根组件向后代组件一层一层传递,这样则需要在每层写props.someData&#…

Java Arrays.copyOfRange的用法

Arrays.copyOfRange的使用方法: 将一个数组拷贝至另一个数组中 参数: original:第一个参数为要拷贝的数组对象 from:第二个参数为拷贝的开始位置(包含) to:第三个参数为拷贝的结束位置&#x…

django websocket

目录 核心代码 consumers.py from channels.generic.websocket import WebsocketConsumer from channels.exceptions import StopConsumer import datetime import time from asgiref.sync import async_to_sync class ChatConsumer(WebsocketConsumer):def websocket_conne…

ssm基于vue框架和elementui组件的手机官网论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本手机官网就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息&#x…

Java 面向对象的三大特征之继承和多态

3、继承 extends 3.1什么是继承,有什么用? 继承:在现实世界当中也是存在的,例如:家里有矿,不用很努力也可以继承。 继承的作用: 基本作用:子类继承父类,代码可以得到复用…

java基础之Java8新特性-Lambda

目录 什么是Lambda表达式 Lambda表达式规范 基本语法 参数列表 函数体 注意事项 如何定义函数接口 1.保证接口中只能有一个抽象方法 2.使用FunctionalInterface注解标记该接口为函数接口 使用Lambda调用无参函数 使用Lambda调用有参函数 使用Lambda的精简写法 使用…

Linux第3步_安装Ubuntu操作系统

创建好虚拟机后,就可以安装Ubuntu操作系统了。 1、双击“VMware Workstation Pro”,得到下面的界面。 2、点击“编辑虚拟机设置”,见下图: 3、等几秒钟,得到下面的界面: 4、点击“CD/DVD”,得到…

vscode无识别已有的maven java项目(visual studio code not recognizing java project)

文章目录 事情经过尝试疑惑问题解决结论 事情经过 未安装任何Java Extension Pack使用 Maven 的 archetype:generate 命令来创建一个新的项目使用vscode打开了该目录然后安装Java Extension Pack等java插件配置了vscode settings.json中的 java.configuration.runtimes和 java…

Ubuntu envs setting

1. change the chmod of folders sudo chown -R $USER:$USER /home/anaconda3 2. torch.cuda.is_available()返回false change conda installation to pip. zai qi ta huan jing pei zhi dou mei wen ti de qing kuang xia , zai shi shi zhe ge fang fa. # CUDA 11.7 con…

Python-1-字符串类型及方法

众所周知,Python面向对象,功能强大 | ू•ૅω•́)ᵎᵎᵎ

mybatis-flex与springBoot整合

mybatis-flex基本使用 1.测试sql2.导入坐标3.框架搭建1.pojo层2.mapper层3.service层4.controller层5.启动类6.配置类7.EmpMapper.xml 4.启动测试 本片文章在springBoot3,jdk21下测试通过 注意官方网站为:https://mybatis-flex.com/ 请点击:直…

使用STM32和ESP8266构建智能家居网络

本文将介绍如何使用STM32微控制器和ESP8266 WiFi模块构建一个智能家居网络。我们将讨论智能家居网络的整体设计思路、硬件连接和软件开发。通过本文的指导和示例代码,读者将能够搭建一个智能家居系统,实现远程控制和数据监测。 一、智能家居网络的整体设…

C++ Optins接口封装设置自动重连

当数据库突然断开的时候,API将接收不到MySQL的连接,在代码里面写关于自动重连可以实现数据库断开之后重连。 1、首先在LXMysql.h创建Option函数 //mysql参数的设定 设置自动重连 在connect之前调用/*int STDCALL mysql_options(MYSQL *mysql, enum mys…

面试题:你如何理解 System.out.println()?

文章目录 前言首先分析System源码:out源码分析println分析 前言 如果你能自己读懂System.out.println(),就真正了解了Java面向对象编程的含义。 面向对象编程即创建了对象,所有的事情让对象帮亲力亲为(即对象调用方法&#xff09…

123基于matlab的差分优化算法优化极限学习机,DE-ELM

基于matlab的差分优化算法优化极限学习机,DE-ELM。输出分类识别结果和准确率。数据可更换自己的,程序已调通,可直接运行。 123差分优化算法极限学习机 (xiaohongshu.com)

关于TCP vegas算法杂谈

看到大佬写的优秀的 tcp vegas 拥塞控制大揭秘-CSDN博客,有感而发,自己研究CC有一段时间了。但是还一直有vegas多牛的说法。从理论上来说,vegas确实是比较好的CC算法,特别是他的公平友好性,我个人也觉得是最好的。 包…

深入了解 Vite:快速、简洁、高效的前端构建工具(下)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

包含自动轮播、点击切换、显示图片信息和页码方框显示码数的 HTML 和 JavaScript 示例:

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>轮播图</title><style>#carousel-conta…

FPGA高端项目:纯verilog的 10G-UDP 高速协议栈,提供7套工程源码和技术支持

目录 1、前言免责声明更新说明 2、相关方案推荐我这里已有的以太网方案本协议栈的千兆网UDP版本1G 千兆网 TCP-->服务器 方案1G 千兆网 TCP-->客户端 方案10G 万兆网 TCP-->服务器客户端 方案 3、该UDP协议栈性能4、详细设计方案设计架构框图网络调试助手GT资源使用GT…