vue如何批量引入组件、注册和使用详解

前言

组件是我们非常常用的东西,很多人使用组件都是通过一个一个文件去引用和注册。这篇文章就来介绍下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.文件目录

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批量引入组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue一次性简洁明了引入所有公共组件的方法

    使用场景 -在开发过程中,往往会有很多自己定义公用组件,我们通过import 导入,components挂载到实例上就行,项目刚开始还好,但是随着项目迭代,组件越来越多,同一个组件不同的方式用需要重复导入挂载,就显得冗余 这里是通过require.context的一种便捷操作 实例 文件结构 component/modal里存放的是我们定义的公共DOM组件 // 导入Vue, 需要使用Vue.component()方法注册组件 import Vue from 'vue' // let f = r

  • 详解如何在vue项目中引入elementUI组件

    前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vu

  • 详解vue引入子组件方法

    前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面是详细的写法. 1.第一步,利用vue-cli创建一个vue前端项目,文件夹如下图 2.第二步,例子是在hom.vue界面引入子组件header.vue,如下图 3.第三步,给子组件header.vue命名一个全局的id, export default { name: 'HomeHeader' } 代码如下图 4.第四步,返回home.vue组件,引用header.vue组件代码如下图 HomeHeader 对应

  • vue组件内部引入外部js文件的方法

    之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位.如果放在index.html,这样每个组件都会有这个js.所以需要在组件内单独引入. 第一种操作 Dom引入js: export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); }, } 第

  • React为 Vue 引入容器组件和展示组件的教程详解

    如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分有什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?这篇文章会演示为什么我们应该采取这种模式,以及如何在 Vue 中编写这两种组件. 为什么要使用容器组件? 假如我们要写一个组件来展示评论,在没听过容器组件之前,我们的代码一般都是这样写的: components/Comment

  • 在vue项目中引入高德地图及其UI组件的方法

    引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script

  • 解决vue 引入子组件报错的问题

    错误信息: Do not use built-in or reserved HTML elements as component id: header 源码: <script> import header from "./components/header" import aside from "./components/aside" import footer from "./components/footer" export de

  • 详解从新建vue项目到引入组件Element的方法

    本文介绍了从新建vue项目到引入组件Element以及Error when rendering component报错解决,分享给大家 一.新建项目 1.打开cmd,运行:vue init webpack Vue-Demo 2.运行:cd Vue-Demo进入这一级 3.运行:npm install 4.运行:npm run dev 如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 config/index.js 解释:1.将 build 的路径前缀修改为

  • vue如何批量引入组件、注册和使用详解

    前言 组件是我们非常常用的东西,很多人使用组件都是通过一个一个文件去引用和注册.这篇文章就来介绍下vue批量引入组件.注册和使用的方法. 一.使用场景 在日常开发中,经常会有这样一种情况: import A from 'components/A' import B from 'components/B' import C from 'components/C' import D from 'components/D' 遇到这种重复的代码,就在想,是否可以进行以下优化,一次性全部引入.于是就找到了

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • vue 组件高级用法实例详解

    一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-component19 :count="1"></my-component19> </div> Vue.component('my-component19',{ name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件

  • Vue函数式组件的应用实例详解

    一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1.以局部组件为例,将组件标记为functional=ture; 因为函数式没有实例,因此组件需要的一切都是通过context参数传递,它是一个包括如下字段的对象: props:提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数,返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象.也

  • Vue关于组件化开发知识点详解

    全局组件注册 Vue.component('first-component', { data: function () { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' }) data 必须是一个函数 组件模板内容必须是单个根元素 组件模板内容可以是模板字符串 全局组件可以嵌套全局组件 组件命名方式 Vue.component('first-com

  • Vue组件选项props实例详解

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

  • vue中component组件的props使用详解

    本文介绍了 vue中component组件的props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component> 注意:props 的

  • 基于vue 兄弟组件之间事件触发(详解)

    直奔主题! 兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件. 场景是父级组件A同时引用两个子级组件B,C.点击B组件中的按钮执行C组件中的事件. 第一步:父级组件A <bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> methods:{ listChild:function(val){//B组件自定义事件 状态是布尔值 t

随机推荐