开发中遇到要加载10个或者更多的,类型相同的组件时,如果用普通的 import 引入组件,components注册组件,代码显得太啰嗦了,这时候就需要用到 require.context 动态加载这些组件,然后用循环的方式引用。

这里以三个组件为例: Bus.vue  Car.vue Train.vue。

第一步

在相同目录下新建index.js文件,如下:

第二步

index.js内容如下:

const resultComps = {}
let requireComponent = require.context(
'./', // 在当前目录下查找
false, // 不遍历子文件夹
/\.vue$/ // 正则匹配 以 .vue结尾的文件
)
requireComponent.keys().forEach(fileName => {
let comp = requireComponent(fileName)
resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
export default resultComps

resultComps 最终的结果是一个对象,如下:

key是 组件的名字,value就是组件。

第三步

使用方法如下:

<template>
<div id="app">
<component
v-for="comp in comps"
:key="comp.id"
:is="allComps[comp]">
</component>
</div>
</template> <script>
import allComps from './components/vehicle'
export default {
name: 'app',
data () {
return {
comps: ['Bus', 'Car', 'Train'],
allComps: allComps
}
}
}
</script>

具体的代码看这里:https://github.com/YalongYan/vue-practice/tree/master/dynamic-loading-component

vue实践系列请看这里:https://github.com/YalongYan/vue-practice

vue实践---vue动态加载组件的更多相关文章

  1. vue中动态加载组件+开发者模式+JS参数值传递和引用传递

    今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...

  2. Vue加载组件、动态加载组件的几种方式

    https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...

  3. vue动态加载组件

    vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...

  4. VUE 动态加载组件的四种方式

    动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...

  5. Vue 动态加载组件

    为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...

  6. React router动态加载组件-适配器模式的应用

    前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...

  7. C# 动态加载组件后怎么在开发环境中调试

    动态加载组件 那就是简单的Assembly.Load动态加载dll而以.这网上资料也有不少.基本的思路基本上就是在本地上一个指定目录如[plugs]存在着一堆dll文件.主程序在初始运行时一般会把指定 ...

  8. vue -- 动态加载组件 (tap 栏效果)

    在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使 ...

  9. QML动态加载组件

    QML中的组件可以重复使用,并且可以通过Loader加载.如下示例: import QtQuick 2.4 import QtQuick.Controls 1.3 import QtQuick.Win ...

随机推荐

  1. 解决NVidia显卡最大化和最小化窗口时的卡顿问题

    最近因为做一个3D的项目,换上了一块Nvidia的显卡.然而,在使用的过程中,发现最大化和最小化窗口时的动画有卡顿现象,并且一般出现一次后便不会再出现, 可是等一会又会出现同样问题. 我以前使用i7的 ...

  2. Working with the NSOperationQueue Class

    Multi-tasking prevents apps from freezing. In most programming languages, achieving this is a bit tr ...

  3. Android并发编程

    Android的并发编程,即多线程开发,而Android的多线程开发模型也是源于Java中的多线程模型.所以本篇也会先讲一些Java中的多线程理念,再讲解具体涉及的类,最后深入Android中的并发场 ...

  4. 【spring boot】spring boot 2.0 项目中使用mysql驱动启动创建的mysql数据表,引擎是MyISAM,如何修改启动时创建数据表引擎为【spring boot 2.0】

    默认创建数据表使用的引擎是MyISAM 2018-05-14 14:16:37.283 INFO 7328 --- [ restartedMain] org.hibernate.dialect.Dia ...

  5. .Net程序测试使用阿里云OCS开放缓存服务

     首先需要有一个阿里的OCS实例和ECS云服务器 请确认这两个是在同一个可用区的,这个很重要! 这两个可以在阿里云官网申请得到 拿到OCS之后 进入OCS控制台,点击下面的客户端下载选择.Net客 ...

  6. 转:Eclipse自动补全功能轻松设置

    Eclipse自动补全功能轻松设置 || 不需要修改编辑任何文件 2012-03-08 21:29:02|  分类: Java |  标签:eclipse  自动补全  设置  |举报|字号 订阅   ...

  7. PHP防止sql注入-JS注入

    一:为了网站数据安全,所有和数据库操作的相关参数必须做相关过滤,防止注入引起的网站中毒和数据泄漏 1.PHP自带效验函数 mysql_real_escape_string() 函数转义 SQL 语句中 ...

  8. redis学习笔记——内存映射数据结构

    内存映射数据结构 解决问题:当一个对象包含的元素数量并不多,或者元素本身的体积并不大时,使用代价高昂的内部数据结构并不是最好的办法. 内存映射数据结构是一系列经过特殊编码的字节序列,创建它们所消耗的内 ...

  9. OpenCV2学习笔记(十五):利用Cmake高速查找OpenCV函数源代码

    在使用OpenCV时,在对一个函数的调用不是非常了解的情况下,通常希望查到该函数的官方声明.而假设想进一步研究OpenCV的函数,则必须深入到源码. 在VS中我们能够选中想要查看的OpenCV函数,点 ...

  10. Win7旗舰版+IIS7没有错误提示怎么办

    在IIS Manger中将ASP的调试属性修改默认值,启用服务端调试和客户端调试都改为True,重启后生效.