【批量注册组件】

2023-11-10

自动的批量注册组件。

大致步骤:

  • 使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。
  • 然后 context 函数会返回一个导入函数 importFn
    • 它又一个属性 keys() 获取所有的文件路径
  • 通过文件路径数组,通过遍历数组,再使用 importFn 根据路径导入组件对象
  • 遍历的同时进行全局注册即可

单次注册

// vue3.0插件写法要素:导出一个对象,有install函数,默认传入了app应用实例,app基础之上扩展import XXX from './xxx.vue' 导入

export default {
install(app) {
    app.component(XXX.name, XXX)  注册
}
}

批量注册

// context(目录名称,是否加载子目录,加载文件的匹配(可以正则))
// 拿到目录下的所匹配的所有.vue 后缀的文件
const importFn = require.context('./',false,/\.vue$/) 
//(当前目录 没有子目录  .vue结尾的文件)

export default {
    install(app) {
              // 根据keys()批量注册 遍历所匹配的所有的文件
      importFn.keys().forEach(path => {
             // 相当于 import XXX from './xxx' 导入组件
      const component = importFn(path).default 
             //使用importFn导入每一个路径
       app.component(component.name,component)
		     // 注册
          })
    }
}

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【批量注册组件】 的相关文章

随机推荐

  • Python 字典 keys() 方法

    描述 Python 字典 keys 方法以列表形式 并非直接的列表 若要返回列表值还需调用list函数 返回字典中的所有的键 语法 keys 方法语法 D keys 参数 无 返回值 以列表形式返回字典中的所有的键 实例 以下实例展示了 k
  • hadoop3.1.1:启动hadoop进程提示ssh 22端口不能连接

    分析 由于在生产环境下 ssh的端口被修改成220 不是使用的默认端口 但是hadoop在启动相应进程的时候 使用的ssh默认端口 解决 1 命令行 临时 这种方式会导致关闭当前终端 该值失效 export HADOOP SSH OPTS
  • java ddd开发_Java开发架构篇《初识领域驱动设计DDD落地》

    作者 小傅哥 博客 https bugstack cn gt 沉淀 分享 成长 让自己和他人都能有所收获 一 前言 gt DDD Domain Driven Design 领域驱动设计 是由Eric Evans最先提出 目的是对软件所涉及到
  • 使用Vue的transition组件写一个数字滚动竟然如此简单

    使用vue的transition组件 来实现一个数字滚动效果 其实不仅可以是数字滚动 还可以是文字 段落滚动 代码片段使用了定位做的 还可以使用transform 只是一种思路 不限制方案 布局 没有别人写的东西炫酷 我都不知道怎么写内容了
  • PCA、SVD、谱聚类

    PCA SVD 谱聚类 1 PCA 2 SVD 3 LDA 4 谱聚类 4 1 无向权重图 4 2 相似矩阵 4 3 拉普拉斯矩阵 4 4 无向图切图 附录1 秩 和 特征值 附录2 协方差 附录3 卡方检验 1 PCA 所谓降维 就是要把
  • testt

    test
  • visio2016企业批量授权版本的激活方式

    首先先下载visio2016的企业批量授权版本 下载地址 用window的资源管理器打开压缩包 点击setup exe 之后默认安装 接下来就是激活的过程 win r快捷键 输入cmd cd C Program Files Microsof
  • anaconda 安装 for macOSX

    步骤 1 登陆官网 https www anaconda com 2 点击 get started 开始 3 选择下载 下载 4 根据自己的电脑来选择下载的方式 我用的是mac所以就选择这个 这里有两种选择 其实都可以 选择一个就行 4 1
  • osgEarth的Rex引擎原理分析(二十一)创建瓦片模型过程详解

    目标 十七 中问题47 瓦片模型的作用是负责管理瓦片中的影像 高程等图层信息 这些信息的获取最终通过createTileModel函数来实现 负责维护瓦片版本等 应当是每一个瓦片都对应有一个瓦片模型 这个瓦片模型是在瓦片请求过程中创建的 具
  • 面试最常被问的 Java 后端题目及参考答案

    一 Java 基础篇 1 Object 有哪些常用方法 大致说一下每个方法的含义 2 Java 创建对象有几种方式 3 获取一个类对象的方式有哪些 4 ArrayList 和 LinkedList 的区别有哪些 5 用过 ArrayList
  • next.js中引入sass

    第一步 安装sass npm install save zeit next sass node sass 第二步 在项目根目录添加 next config js 文件 用于指示Next加载对用的功能 const withSass requi
  • 基础软件与开发语言开源论坛

    ChinaOSC 2022基础软件与开发语言开源技术论坛将于8月20日 14 00 18 00在陕西省西安高新国际会议中心召开 论坛邀请到在操作系统 中间件等基础软件领域 以及编程语言领域深耕多年的开源专家 深度分享开源软件研发的创新之路
  • 【Pandas总结】第九节 Pandas_累计与分组 pd.groupby()

    文章目录 一 数据准备 二 累计值计算 2 1 df describe 2 2 常用统计值 三 分组 pd groupby 四 更多的使用方法 aggregate filter transform apply 4 1 aggregate 4
  • [Kafka] - Kafka Java Producer代码实现

    根据业务需要可以使用Kafka提供的Java Producer API进行产生数据 并将产生的数据发送到Kafka对应Topic的对应分区中 入口类为 Producer Kafka的Producer API主要提供下列三个方法 public
  • webview拦截垃圾电信运营商的广告方法

    mWebView setWebViewClient new WebViewClient Override public boolean shouldOverrideUrlLoading WebView view String url if
  • terminated 线程_Java中如何正确地中断一个线程?

    本文主要整理了关于线程中断的相关知识点 1 线程的状态 NEW 新建 一个尚未启动的线程处于这一状态 A thread that has not yet started is in this state RUNNABLE 可运行 一个正在
  • QT实现塔防游戏

    在基本功能实现后 对游戏进行优化 主要有以下几部分 实现传奇的升级 实现传奇的移除 绘画出波数与血量 实现游戏的暂停与回到选关关卡 实现游戏的胜利与失败 1 实现传奇的升级 创建一个selectbutton2类 ifndef SELECTB
  • 【华为OD机试真题 Python】多个数组合并

    前言 本专栏将持续更新华为OD机试题目 并进行详细的分析与解答 包含完整的代码实现 希望可以帮助到正在努力的你 关于OD机试流程 面经 面试指导等 如有任何疑问 欢迎联系我 wechat steven moda email nansun09
  • 如何让RecyclerView滑动到底部?

    在做这个功能时 使用scroll的任何一个方法 发现它每次都只滑到了一半 今天终于解决了 解决方法如下 LinearLayoutManager linearLayoutManager LinearLayoutManager recycler
  • 【批量注册组件】

    自动的批量注册组件 大致步骤 使用 require 提供的函数 context 加载某一个目录下的所有 vue 后缀的文件 然后 context 函数会返回一个导入函数 importFn 它又一个属性 keys 获取所有的文件路径 通过文件