全局批量注册Vue组件方法

热爱代码的小白
185 阅读2分钟

直接上重点吧,我看了一下写完的样子,好像挺乱的,你应该看不懂,看懂了我叫你爸爸. 如果真看不懂就看最下面，无脑抄就行了，抄完点个赞，因为我这里是最简单批量注册。

来看看我们平常是怎么注册组件的

Vue.component('component-a', () => import("./component-a"))
Vue.component('component-b', () => import("./component-b"))
Vue.component('component-c', () => import("./component-c"))

不出意外的话大家基本上是上面这样注册组件的吧，还使用了个组件懒加载叭错叭错

其实吧还可以利用webpack的require.context() 遍历指定的公共组件目录，实现自动化导入模块。仔细看了官网给出的例子，需要全局注册的只需要三样东西，组件名、组件模块、注册；步骤可以分为三步

（等一下，这里仔细看官网就当我放屁，别看了其实我也是在网上搜的哈哈哈😂😂😂）

下面我来介绍一下吧

require.context(directory,useSubdirectories,regExp)

  • directory:表示检索的目录
  • useSubdirectories：表示是否检索子文件夹
  • regExp:匹配文件的正则表达式,一般是文件名

1. require.context遍历获取所有组件

对于require.context用法，可以在网上或者packweb官网上查看，有详细的说明。require.context会拿到指定目录下所有能匹配上的文件，返回一个函数。

const requireComponent = require.context("./components", true, /\.vue$/);

console.dir(requireComponent)

snipaste20220414_211444.jpg

打印这个函数我们得到了1个id属性和两个函数属性

  1. id:这个一看像个路径,老夫姑且一算应该就是匹配路径用的(官网的原话是: context module 的模块 id. 它可能在你使用 module.hot.accept 时会用到 我一猜你就看不懂)

  2. keys():这个这是见名知道意思....,妈的我说不出来,先上代码看看打印出来啥

console.dir(requireComponent.keys())

snipaste20220414_212958.jpg

  • 兄弟们打印出来一看,我一琢磨,这他妈不就是我的组件路径嘛,这尼玛就好办了,但尼玛我转念一想,我好像没有模块啊,让我们继续往下看

还尼玛真准备往下看啊,模块模块没拿到,组件名组件名没拿到,我们还是往上看吧,你看我们第一次打印出来的 requireComponent()是不是本来可以传个参数req

他的方法里面的reslove()好像也可以传个参数还他妈跟他一样都是req,你就说离谱不离谱吧

关键是req是个啥??? 敲黑板划重点了啊 注意req是 keys() 数组中的值，而不是组件名😒😒😒

为啥他会是keys()的值呢,,是不是懵逼你和我,懵了个大笔,,别问我我也不知道.官网说的也不清楚,但是我就是知道,但是你现在也知道了

官网是这样说的 keys(): 也是一个函数，它返回一个数组，由所有可能被此 context module 处理的请求（译者注：参考下面第二段代码中的 key）组成。

然后我们再来打印一下requireComponent() 传进去一个keys[0] (这里能看懂吧,keys是个数组,我先传第一个值进去)(这里能看懂吧,keys是个数组,我先传第一个值进去)

还是上代码吧怕你们听不懂

 console.dir(requireComponent(requireComponent.keys()[0]))

snipaste20220414_221339.jpg

看,是不是这样我们就拿到模块了 就差模块名字了,模块都拿到了还怕拿不到名字嘛我们展开看看

snipaste20220414_222424.jpg

哟呵这样是不是看到名字了并且模块上面的所有属性方法都在,那我们不就为所欲为了😎😎😎 打住打住我们是来做批量注册的

  1. reslove():是一个函数，它返回 req 被解析后得到的模块 id 这是官方说的也不知道你们听不听的懂,大白话就是返回这个模块的id ,也就是模块的路径懂了没 还是给你们看看代码吧
console.dir(requireComponent.resolve(requireComponent.keys()[0]))

snipaste20220414_222239.jpg

到此我们就把require.context 介绍完了 ,模块也拿到了,名字也拿到了.

2.下面直接批量注册

上面没听懂没关系,下面直接照着我的操作就行了

第一步 创建components/index.js文件

把下面这行代码抄进去 。

下面这行代码应该能看懂吧，就是使用vue.use（）方法来注册

不懂去看官网 (cn.vuejs.org/v2/api/#Vue…)

export default {
  install(Vue) {
    const requireComponent = require.context('./', true, /\.vue$/) //‘./’是批量注册组件的路径
      Vue.component(requireComponent(item).default.name, requireComponent(item).default)
    })
  }
}

第二步 把注册的组件导入到min.js中去注册

一样的，直接复制抄我的就完了，无脑抄，

还是不能无脑抄，下面这串代码是要放到min.js里面

// 全局组件批量注册
import Components from './components'
Vue.use(Components)

好了到此就结束了谢谢你的观看,如果你都看到这里了，就点个赞吧

avatar
文章
阅读
粉丝