这篇文章主要介绍了如何在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',
}