Hi i have a situation where i need to register multiple components at run time within a file.

Display.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>

in my above file how i want my components to be loaded something like shown below:

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

here is how i'm dispatching event to above file 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);

Execution sequence:

1. event dispatch component-ready
2. eventlisterner in created of file Display.vue will call load method

Problem: in my current approach components are registered globally, that i want to avoid. i want to register all components to Display.vue file only

CodePudding user response：

To locally register the components on the fly, you can copy the component definitions into this.$options.components:

export default {
  methods: {
    load(e) {
      this.$options.components = e.components