把一些使用频率较高的组件封装为全局组件,防止频繁引入。例如:element中的各个组件
实现方法,通过借助webpack的require.context() 方法
来封装自己常用的全局组件,开发步骤如下
第一步,封装importAll.js
// importAll.js文件
import Vue from 'vue'
//修改组件名称
function changeStr (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
// 这里把allCommon目录下的所有的组件都引入
const requireComponent = require.context("@/components/allCommon", true, /\.vue$/)
// 查找同级目录下以vue结尾的组件
const install = () => {
requireComponent.keys().forEach(fileName => {
let config = requireComponent(fileName)
console.log(config) // ./child1.vue 然后用正则拿到child1
let componentName = changeStr( // 生成组件名称,我这里生成的是A 、 B
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
)
console.log(componentName)
// 使用Vue.Component()把组件注册到全局
Vue.component(componentName, config.default || config)
})
}
export default {
install // 对外暴露install方法,调用Vue.use()时,执行install方法
}
第二步,在main,js中引入
import importAll from '@/common/importAll'
Vue.use(importAll); // 注册入全局(这里执行install方法)
第三步,在全局任意组件中都可调用
比如说在test.vue组件中,使用如下:
<template>
<div>
<A></A>
<B></B>
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
最后我们就可以随时随地在页面中使用这些高频组件,无需再手动一个个引入了。