Cargue componentes dinámicos de Vue basados ​​en una variable de cadena de prop.

Digamos que tenemos una estructura de archivos como esta:

app / ├── App.vue ├── componentes / │ index.js │ ├── Type1.vue │ ├── Type2.vue │ └── Type3.vue …

Y dentro de App.vue, queremos cargar un componente basado en una propiedad que se le haya pasado, denominada componentName

En mi caso, sabía que la cadena componentName solo coincidiría con uno de los nombres de los componentes en la carpeta de componentes. Entonces, App.vue puede seleccionar el componente correcto como este:

// App.vue

Con componentes / index.js:

// components / index.jsexport {predeterminado como Tipo1} desde './Type1.vue' exportar {predeterminado como Tipo2} desde './Type2.vue' exportar {predeterminado como Tipo3} desde './Type3.vue'

Y eso es.

Ahora puede seleccionar dinámicamente un componente basado en una variable prop.