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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue 实现上传组件
May 31 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue组件的路由高亮问题解决方法
Vue通过懒加载提升页面响应速度
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
如何使用vue3打造一个物料库
vue完美实现el-table列宽自适应
You might like
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
php实现简单洗牌算法
2013/06/18 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
JS查看对象功能代码
2008/04/25 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
成考报名单位证明范本
2014/01/16 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs