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 tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
vue组件的路由高亮问题解决方法
Vue通过懒加载提升页面响应速度
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
如何使用vue3打造一个物料库
vue完美实现el-table列宽自适应
You might like
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python+mysql实现教务管理系统
2019/02/20 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
销售助理岗位职责
2014/02/21 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
药剂专业自荐书
2014/06/20 职场文书
社会学专业求职信
2014/07/17 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
单位租房协议书样本
2014/10/30 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
python实现局部图像放大
2021/11/17 Python