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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue组件的路由高亮问题解决方法
Vue通过懒加载提升页面响应速度
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
如何使用vue3打造一个物料库
vue完美实现el-table列宽自适应
You might like
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
使用JS动态显示文本
2017/09/09 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
Python使用wxPython实现计算器
2018/01/30 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python破解同事的压缩包密码
2020/10/14 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
syb养殖创业计划书
2014/01/09 职场文书
求职信怎么写
2014/05/23 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
银行催款通知书
2015/04/17 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers