这个批量引入组件的方法,挺酷
我们在写vue组件的时候,如果在一个组件里引入多个组件,一般的写法是这样的
【这个批量引入组件的方法,挺酷】
文章图片
完全没毛病,但是这样的写法就有点累赘,每次新增一个组件又要添加多处,原来现在已经有更方便的写法了,实践了一下,非常nice
文章图片
const routes = {};
const contexts = require.context('../SubComponets', false, /\.vue$/);
contexts.keys().forEach(key => {
let name = key.slice(2, -4);
console.log(name);
routes[name] = contexts(key).default || contexts(key);
})
components: {
...routes
},
代码解析:根据自己要引入的组件写require.context()的参数,第一个为路径;第二个为是否查找子文件夹;第三个为组件名字正则表达式匹配
然后可以遍历组件的名称,挂载到组件上。也可以通过过滤name的方法,挂载需要的组件,非常实用~
推荐阅读
- springboot页面国际化
- java|java 反射的概念
- 推荐这个UI自动化测试框架,像口语化一样写用例
- excel中html批量转化为pdf|excel中html批量转化为pdf,批处理|批量将EXCEL转为PDF
- cs144|cs144 lab0 lab1记录
- 程序人生|Java 面试的“完美圣经”,有了这个还愁面试吗()
- 组合筛选vue_学会这个套路,彻底掌握排列组合。【会点算法的前端更早下班】...
- 趣学Java|干掉Session(这个跨域认证解决方案真的优雅)
- springboot2.x引入feign踩的坑及解决
- 干掉Session(这个跨域认证解决方案真的优雅!)