vue 简单实现组件自动注册

1、应用场景：

vue 项目中，需要在某个页面上引用某一类组件时，这一类组件存在于相同的文件夹，并且需要在页面进行动态的组件绑定

---

2、设计思路

2.1 组件使用 <component :is=“xxx” ></component>

<component :is="currenComponent" :publicId="publicId" @publicOpen="publicOpen"> </component>

2.2 批量组件注册 require.context()

require.context() 是webpack支持模块批量导入的API，允许接收三个参数

• param 1：组件所在文件路径
• param 2：是否深度遍历文件夹
• param 3：文件后缀名

<script>
	const cptAll = require.context('@/views/publicForm',true,/\.vue$/)
	let reqiure_cpts = {}
	// cptAll.keys() 返回的是匹配到的带有路径的文件名数组 
	cptAll.keys().forEach(fileName => {
		// cptAll(fileName) 返回该组件上下文内容
		let component = cptAll(fileName)
		// component.default 返回该组件上下文内容请求
		reqiure_cpts[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = component.default
	})
	export default{
		component:reqiure_cpts
		data(){
			return {
				currenComponent:"",
			}
		},
		method:{
			// 逻辑部分
		}
	}
</script>

使用注意：

• 案例注册的组件名默认就是vue文件名
• 根据需求在逻辑部分处理进行组件切换

本文大概就说到这儿，有问题可以留言，谢谢支持！