回顾注册全局组件的方法
已知注册全局组件有两种方法:
一种是直接去main.js中引入文件,通过vue.component('组件名',组件对象),导入定义的变量名就是组件对象,组件名是组件的name
import Pagetools from '@/components/PageTools'
Vue.component('Pagetools' , Pagetools)
第二种是将要全局注册的全部组件文件导入到同一个index.js文件中,通过install函数进行分别注册,之后将这个index.js文件导入到main.js文件中,通过vue.use挂载到全局,之后如果又有新的全局组件需要注册,直接引入到index.js文件中即可
vue2中install函数的参数是vue,vue3中参数是app!!!!!!
import Components from '@/components/index.js '
Vue.use(Components) // main.js文件
那么有没有什么更简便的方法呢?当然有!
①使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。
②然后 context 函数会返回一个导入函数 importFn,它又一个属性 keys() 获取所有的文件路径
③通过遍历文件路径数组,使用 importFn 根据路径导入组件对象
const importFn = require.context('./', false, /\.vue$/)
参数:1. 目录 2. 是否加载子目录 3. 加载的正则匹配
批量自动化注册组件:app是vue3中install函数的参数,以下内容就是写在install函数中
需要注意的是,这里注册完成一样是需要将文件导入到main.js文件中,通过Vue.use进行全局挂载
原理就是:当你在mian.js导入,使用Vue.use() (vue3.0 app)的时候就会执行install函数