javascript - 使用在父级中导入的 <component>

Question

我正在构建一个管理其他组件的组件。 它根据 props 和 inputs 在特定位置动态渲染组件，就像协调器一样。

用例

我的协调器有以下占位符，例如网格(p1 ... p6):

|-p1-|-p2-|-p3-|
|-p4-|-p5-|-p6-|

在给定时刻，它将组件 C1 渲染为 p2，将 C2 渲染为 p6:

|-p1-|-C1-|-p3-|
|-p4-|-p5-|-C2-|

在另一个时刻，它用 C3 替换了 C1:

|-p1-|-C3-|-p3-|
|-p4-|-p5-|-C2-|

问题

鉴于这种动态，我无法(据我所知)使用插槽。因此，我将 component 标签与 :is 属性一起使用，以便动态渲染正确的组件。问题是，为了使 :is 工作，我必须在我的 Orchestrator/manager 组件中定义该组件。我想将其分开以供重用，在那里导入组件是没有意义的。一种解决方案是 globally register组件。如果可能的话我想避免这种情况。有办法吗？我对你可能认为的任何类型的反射魔法持开放态度 n_n'

Answer 1

您可以通过这样的 prop 传递组件:

Orchestrator.vue

<component :is="comp"/>

export default {
  props: ['comp']
}

Test.vue

<orchestrator :comp="MyComponent"/>

import Orchestrator from './orchestrator.vue'
import MyComponent from './my-component.vue'

export default {
  components: {
    Orchestrator,
  },

  data() {
    return {
      MyComponent,
    };
  },
}