vue如何批量引入组件、注册和使用详解


Posted in Vue.js onMay 12, 2021

前言

组件是我们非常常用的东西,很多人使用组件都是通过一个一个文件去引用和注册。这篇文章就来介绍下vue批量引入组件、注册和使用的方法。

一、使用场景

在日常开发中,经常会有这样一种情况:

import A from 'components/A'
	import B from 'components/B'
	import C from 'components/C'
	import D from 'components/D'

遇到这种重复的代码,就在想,是否可以进行以下优化,一次性全部引入。于是就找到了webpack的api,通过调用require.context来进行处理,具体代码如下:

二、使用步骤

涉及到:

  • 组件名称为带中横线规范,最后要转为驼峰命名法的功能;
  • component的is属性;

具体详解都在代码中:

1.文件目录

vue如何批量引入组件、注册和使用详解

2.HTML代码

<template>
  <div class="water-analysis">
    <div class="content-box" ref="contentbox">
      <a-tabs :default-active-key="activeComponent" @change="tabChangeHandle">
        <a-tab-pane
          v-for="item in tabList"
          :key="item.key"
          :tab="item.tab"
        ></a-tab-pane>
      </a-tabs>
      <div class="tab-pane-box">
      	<!-- 通过is属性,绑定对应的组件名称,展示对应的组件 -->
        <component :is="activeComponent"></component>
      </div>
    </div>
  </div>
</template>

3.js代码

语法:require.context(directory, useSubdirectories, regExp)

  • directory: 要查找的文件路径
  • useSubdirectories: 是否查找子目录
  • regExp: 要匹配文件的正则

返回值:两个方法一个属性

  • keys(): 返回匹配成功模块的名字组成的数组
  • resolve(): 接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
  • id:执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载
<script>
// 中横线转驼峰
var camelCase = function (s) {
  return s.replace(/-\w/g, function (x) {
    return x.slice(1).toUpperCase();
  });
};
// 批量引入子组件  重点,语法见上
const allComponents = require.context("./comp", false, /\.vue$/);

console.log(allComponents.keys())
// ["./tem-a.vue", "./tem-b.vue", "./tem-c.vue", "./tem-d.vue"]

console.log(allComponents.id)
//./src/views/tempManage/comp sync \.vue$

//制作组件数组,在下方components中注册使用
let resComponents = {};
allComponents.keys().forEach(comName => {
  let name = camelCase(comName);
  const comp = allComponents(comName);
  resComponents[name.replace(/^\.\/(.*)\.\w+$/, "$1")] = comp.default;
});

export default {
  name: "WaterQuery",
  components: resComponents,
  data() {
    return {
      activeComponent: "temA",
      tabList: [
        {
          key: "temA",
          tab: "A组件",
        },
        {
          key: "temB",
          tab: "B组件",
        },
        {
          key: "temC",
          tab: "C组件",
        },
        {
          key: "temD",
          tab: "D组件",
        },
      ],
    };
  },
  created() {
    if (this.$route.query["val"]) {
      this.activeComponent = this.$route.query["val"];
    }
  },
  methods: {
    // 切换tab栏
    tabChangeHandle(val) {
      const {path} = this.$router;

      this.$router.push({
        path,
        query: {val},
      });
      this.activeComponent = val;
    },
  },
};
</script>

4.css代码(可不看,写出来只是为了代码完整性,拿来可以直接运行展示)

<style scoped>
.water-analysis {
  height: 100%;
  overflow: auto;
}
.content-box {
  height: 100%;
}
.tab-pane-box {
  height: calc(100% - 62px);
}
</style>

三、总结

到此这篇关于vue如何批量引入组件、注册和使用的文章就介绍到这了,更多相关vue批量引入组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
浅析VUE防抖与节流
Nov 24 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue组件的路由高亮问题解决方法
Vue通过懒加载提升页面响应速度
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
如何使用vue3打造一个物料库
vue完美实现el-table列宽自适应
You might like
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
python中正则表达式的使用详解
2014/10/17 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Django实现文件上传下载
2019/10/06 Python
Python 中@property的用法详解
2020/01/15 Python
Python 爬虫的原理
2020/07/30 Python
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
代理班主任的自我评价
2014/02/04 职场文书
小学三年级学生评语
2014/04/22 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
办公室日常管理制度
2015/08/04 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书