当全局统一注册多个组件,你需要一次引入并注册。就像这样:
import bannerBox from '@/components/banner.vue'
import goodsOrder from '@/components/goods-order.vue'
import selectImg from '@/components/select-img.vue'
import navBar from '@/components/nav-bar.vue'
Vue.component('banner-box',bannerBox);
Vue.component('goods-order',goodsOrder);
Vue.component('select-img',selectImg);
Vue.component('nav-bar',navBar);
看上去是不是不舒服,而且现在还只是四个,如果10个呢,100个呢,每次写一个组件需要在这里加两行代码,难受。这时候就用到了自动化,几行代码全部解决,如下:
import Vue from 'vue'
const modulesContext = require.context('', false, /\.vue$/)
modulesContext.keys().forEach(module=>{
const REG=/^\.\/(.*)\.vue/ig,
MO = modulesContext(module);
Vue.component(module.replace(REG,'$1'),MO.default||MO)
})
解释一下,使用require的方法context(),获取目录结构,其中传三个参数:1. 路径(我这里是是当前目录,所以传了空),2. 是否读取子目录,3. 正则(规定匹配什么样的文件。),modulesContext 上面有几个方法,具体可以读API、我这里用到了key(),这个方法会返回一个数组集,就是(路径+文件名)。如下:
./banner.vue
./goods-order.vue
./select-img.vue
./nav-bar.vue
而require.context('./index.js')可以直接返回文件的export。即modulesContext(module);
这里用正则过滤掉(./)和(.vue),作为组件名。
实现组件自动化注册。
——END——