vue动态加载组件__vue重新加载组件

相关文章推荐

风流的火柴 · Delphi 之第八课动态数组 - ...· 1 月前 ·

含蓄的火锅 · PNG图片透明背景变黑-阿里云开发者社区· 3 月前 ·

瘦瘦的伤痕 · 使用 DateTimePicker ...· 8 月前 ·

好帅的西装 · AIMD如何使体系随机地在势能面上运动并进行 ...· 1 年前 ·

在工作中遇到这么一个需求，就是根据所选的数据，动态显示对应的组件。

当时就不想引入import一堆的组件，想传入组件名就能显示组件，百度之后果然找到对应的方法，那就是require.context。

由于涉及到业务，所以我就创建一个简单的demo，能看到怎么使用即可。先看一下项目结构，如图1所示。

vue动态加载组件_百度

图1 目录结构图

看一下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

在需要引入组件的vue页面引入index.js，我以Appvue为例，代码如下：

<template>
    <div id="app">
        <div style="line-height: 50px;">
            俺是父组件
        </div>
        <div>
            这是引入的子组件：
            <div style="line-height: 50px;border: 1px red solid;">
                <component v-for="comp in comps" :key="comp.id" :is="allComps[comp]"></component>
            </div>
        </div>

    </div>
</template>

<script>
    import allComps from './components/index.js'
    export default {
        name: 'app',
        data() {
            return {
                // 此处组件名即文件名
                comps: ['demo1', 'demo2', 'demo3'],
                allComps: allComps
            }
        }
    }
</script>

<style></style>

效果如图2所示

vue动态加载组件_数据_02

图2 演示图

本篇到此就结束了

java 泛型LIst方法 java 泛型 t ?

综述：泛型是JDK5.0之后加入的新特性，属于编译期的概念。引入泛型可以统一集合中的数据类型从而减少强制类型转换。泛型的优点是统一类型，减少强制转换，这同时也是他的缺点，因为引用了泛型类型将过度统一。泛型中常见的T、E分别代表Type、Element，只是一个标识符，没有其它的意义。示例及解释：import java.util.ArrayList; import java.util.HashMa

java list JSON深拷贝 java深拷贝复制list

List深拷贝如图，深拷贝就是将A复制给B的同时，给B创建新的地址，再将地址A的内容传递到地址B。ListA与ListB内容一致，但是由于所指向的地址不同，所以改变相互不受影响。使用序列化的方式拷贝：/** * 对集合进行深拷贝注意需要对泛型类进行序列化（实现serializable） * @param src 源list * @param <T> list的对