vue3批量导入全局注册组件
使用reuqire.context批量导入并全局注册组件
·
博主最近在做一个需要使用大量全局注册组件的项目,而如果将所有的组件都单个引入,不仅前期写起来麻烦,而且后期维护也让人头疼,所以我们可以选择批量导入的方式。
一、步骤讲述
经过大量的搜索、整理以及自己的使用情况,步骤如下:
- 使用
require.context
导入大量组件,require.context
就不详细讲述了,如果有兴趣大家可以去看一下webpack官网。 - 注册导入大量组件的文件。
二、具体使用
-
首先在存有大量组件的文件夹中,新建一个js文件(如:batchImport.js),然后写入导入代码:
// require.context中第二个参数有两个值:true和false,分别为是否搜索子文件夹 const imports = require.context('./', true, /\.vue$/) export default { install (app) { imports.keys().forEach(e => { const component = imports(e).default app.component(component.name,component) }) } }
上面代码中
component.name
是需要导入的组件的name
值,所以组件的script
值应有name
,如:<script> export default { name: "headerOne" } </script>
-
在main.js中导入此文件,代码为:
import batchImport from "@/components/component/batchImport"; app.use(batchImport)
-
在
vue
文件中使用<template> <div v-for="(item,index) in component" :key="index" class="container-component"> <component :is="item.name"></component> </div> </template>
export default { name: 'Home', data() { return { component: [{ name: 'hello' },{ name: 'login' }] } } }
三、代码验证环境
-
vue3.0
更多推荐
已为社区贡献1条内容
所有评论(0)