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 19 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue组件的路由高亮问题解决方法
Vue通过懒加载提升页面响应速度
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
如何使用vue3打造一个物料库
vue完美实现el-table列宽自适应
You might like
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
关于PHP实现异步操作的研究
2013/02/03 PHP
php简单防盗链实现方法
2015/07/29 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
Python多线程学习资料
2012/12/19 Python
python实现的一个火车票转让信息采集器
2014/07/09 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Django视图、传参和forms验证操作
2020/07/15 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
小学英语教学反思
2014/01/30 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
检讨书模板
2015/01/29 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
小学中队活动总结
2015/05/11 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
导游词之无锡古运河
2019/11/14 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP