如何在全球而不是本地的运行时间动态添加多个组件

发布于 2025-02-07 18:36:54 字数 1639 浏览 3 评论 0原文

嗨，我有一个情况，我需要在文件中的运行时间注册多个组件。

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>

在上面的文件中，我希望将组件加载到如下所示的内容：

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

这是我将事件派遣到上面的文件 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);

执行序列：

事件dispatch component-Ready-Ready
eventListerner在文件 display.vue 创建的将调用load方法方法

问题：我当前的方法组件在全球注册，我想避免。我想将所有组件注册到 display.vue 文件

原文

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:

event dispatch component-ready
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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

涫野音 2025-02-14 18:36:54

要局部注册即时注册组件，您可以将组件定义复制到this。$ options.com.ponents：

export default {

  methods: {

    load(e) {

      this.$options.components = e.components

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 ????

      this.$nextTick(() => {
        this.currentComponent = e.components.container
      })
    },
  },
}

demo

回复收藏 0 原文

~没有更多了~