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实现购物车全选和反选功能
Nov 17 Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
详解Vue的options
May 15 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
vue组件的路由高亮问题解决方法
Vue通过懒加载提升页面响应速度
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
如何使用vue3打造一个物料库
vue完美实现el-table列宽自适应
You might like
一段php加密解密的代码
2007/07/16 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
JsRender for object语法简介
2014/10/31 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
详谈python read readline readlines的区别
2017/09/22 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
python pygame实现五子棋小游戏
2020/10/26 Python
Python和Sublime整合过程图示
2019/12/25 Python
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
运动会演讲稿100字
2014/08/25 职场文书
校园安全广播稿范文
2014/09/25 职场文书
管理人员岗位职责
2015/02/14 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
Python Socket编程详解
2021/04/25 Python
mysql 生成连续日期及变量赋值
2022/03/20 MySQL