• vue动态加载组件


    这篇文章主要介绍了如何在vue项目中按需加载动态组件。

    目录结构

    // view下有个page1文件夹,其中包含componensts组件和page1.vue,还有map.js存放page1.vue中动态加载componensts组件的映射关系
    
    -view
    --page1
    ---components
    ----com1
    ----com2
    ---page1.vue
    ---map.js
    

    主文件page1.vue引入组件(常规引入组件)

    <template>
    	<div class="contain">
            <Com1 ref="com1Ref"></Com1>
            <Com2 ref="com2Ref"></Com1>
        </div>
    </template>
    <script>
    	import Com1 from './components/com1'
        import Com2 from './components/com2'
        export default {
            name: 'Page1',
            components: {
                Com1, Com2
            }
        }
    </script>
    

    主文件page1.vue引入组件(动态引入组件)

    <template>
    	<div class="contain">
        	<component :is="curComponent[0]" :ref="curComponent[1]"></component>
        </div>
    </template>
    <script>
    	// 注意这里不再直接引入组件,而是引入映射关系
        import map from './components/map.js'
        export default {
            name: 'Page1',
            data() {
                return {
                    key: '', //这里的key用于区分不同的组件,只需动态变化key值,对应的组件由计算属性自动引入
                }
            },
            computed: {
                curComponent() {
                    let k = this.key + 'info' // 组件映射关系标志
                    let p = map[k] // 组件相对路径
                    let c = () => import(`${p}`) // 动态组件
                    let r = this.key + 'Ref' // ref
                    return [c, r]
                }
            }
        }
    </script>
    

    组件和标志映射关系文件 map.js

    export default {
        'key1-info': './components/com1/com1.vue',
        'key2-info': './components/com2/com2.vue',
    }
    
  • 相关阅读:
    git stash回退
    基于git tag快速修复
    Go语言开发规范
    defer实现原理
    string数据结构
    关于const iota
    struct
    map数据结构底层详解
    go 函数进阶
    go 内存分配原理
  • 原文地址:https://www.cnblogs.com/codebook/p/13063132.html
Copyright © 2020-2023  润新知