Hola, tengo una situación en la que necesito registrar varios componentes en tiempo de ejecución dentro de un archivo.

Pantalla.vue

 <template> <div> <component v-if="currentComponent" :is="currentComponent"> </component> </div> </template> <script> import Vue from 'vue'; export default { data(){ return{ currentComponent:null, } }, methods:{ load(e){ for(let key in e.components){ Vue.component(key,e.components[key]); } this.$nextTick(() =>{ this.currentComponent = e.components.container; }); }, }, created(){ document.body.addEventListener('component-ready',this.load, false); }, } </script>

en mi archivo anterior, cómo quiero que mis componentes se carguen algo como lo que se muestra a continuación:

 components:{ container: component Object{}, header: component Object{}, body: component Object {}, footer: component Object {}, }

así es como envío el evento al archivo anterior Display.vue

 const event = new Event('component-ready'); event.components = { container: component Object{}, header: component Object{}, body: component Object {}, footer: component Object {}, }; document.body.dispatchEvent(event);

Secuencia de ejecución:

1. Despacho de eventos listo para componentes
2. eventlisterner en creado del archivo Display.vue llamará al método de load

Problema: en mi enfoque actual, los componentes se registran globalmente, lo que quiero evitar. quiero registrar todos los componentes solo en el archivo Display.vue