Imagine there are 4 components available on a page or within a component, and the user can utilize them based on their selection by toggling between Input, Image, Video, or Vudio components. There are two ways to lazily load these components:
1)
<template>
<component :is="compName">
</template>
data: () => ({compName: 'input'}),
components: {
input: () => import('/components/input'),
video: () => import('/components/video'),
audio: () => import('/components/audio'),
image: () => import('/components/image'),
}
2)
<template>
<component :is="loadComp">
</template>
data: () => ({compName: 'input'}),
computed: {
loadComp () {
const compName = this.compName
return () => import(`/components/${compName}`)
}
}
What is the difference between the two methods? Which is the correct way to dynamically import components? Your input is appreciated.