0👍
i think you are looking for dynamic component .
that way, you can keep the components you need in some json file, import it to the parent component and dynamically create the children, for example, if you have a jsonMap.json
file:
{
landingPage:{
banners:['child1','child2']
}
}
then landingPage.vue
:
<template>
<div>
<component v-for="(banner,index) in getBanners" :is="banner" :key="index"</component>
//this is a dynamic component. the 'is' attribute determine what it will be.
</div>
</template>
<script>
import jsonMap from 'path/to/jsonMap'
import child1 from 'path/to/shared/components/child1.vue'
import child2 from 'path/to/shared/components/child2.vue'
import child3 from 'path/to/shared/components/child3.vue'
export default {
name: 'landingPage',
components:{child1,child2,child3},
methods:{
getBanners(){
return jsonMap[this.name].banners
}
}
}
</script>
landing page will render 2 banners- according to the jsonMap.
note that despite you must import and register your components, that can not be done dynamically.
0👍
I would make a component called ModuleLoader.vue
in that component import all of your components in the load
array. Then make a dynamic component that takes a computed property or just a prop to load the component.
App.vue
<ModuleLoader
v-for="(module, index) in modules"
:key="`ModuleLoader_${index}`"
v-bind="module"
/>
ModuleLoader.vue
<component
:is="moduleData.type"
v-bind="moduleData.content"
/>
You’ll need a ModuleData
prop and you’ll have to import the components you’re loading into this file
Check out this fiddle