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 插槽简介及使用示例
Nov 19 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
vue组件的路由高亮问题解决方法
Vue通过懒加载提升页面响应速度
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
如何使用vue3打造一个物料库
vue完美实现el-table列宽自适应
You might like
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
19个Android常用工具类汇总
2014/12/30 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
详解python:time模块用法
2019/03/25 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
python中下标和切片的使用方法解析
2019/08/27 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
实现Python与STM32通信方式
2019/12/18 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
python与idea的集成的实现
2020/11/20 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
绩效管理实施方案
2014/03/19 职场文书
大学新生军训方案
2014/05/03 职场文书
项目经理任命书内容
2014/06/06 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
质检员岗位职责范本
2015/04/07 职场文书
赡养老人协议书范本
2015/08/06 职场文书
五年级作文之成长
2019/09/16 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
Java的Object类的九种方法
2022/04/13 Java/Android