Question

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

用例

我的协调器具有以下占位符，例如网格（p1 ... p6）：

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

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

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

再过一遍，它将C1替换为C3：

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

问题

鉴于这种动态，我（据我所知）不能使用slots。因此，我在component道具中使用了:is标签，以便动态呈现正确的组件。问题在于，为了使:is工作，我必须在业务流程/经理组件中定义该组件。而且我想将其分开以便重复使用，将组件导入那里没有意义。一种解决方案是globally register个组件。如果可能，我想避免这种情况。有办法吗？我对任何您认为n_n'

的反射魔术都持开放态度

Answer 1

您可以像这样通过道具传递组件：

Orchestrator.vue

inputAssistantItem.trailingBarButtonGroups

self.textField.inputAssistantItem.leadingBarButtonGroups = []
    self.textField.inputAssistantItem.trailingBarButtonGroups = []
    self.textField.autocorrectionType =  .no

Test.vue

<component :is="comp"/>

export default {
  props: ['comp']
}

Answer 2

您应该可以使用动态加载的async components。

例如...

<component :is="p2Replacement"></component>

data () {
  return {
    p2Replacement: null
  }
},
methods: {
  setP2Replacement(component) {
    this.p2Replacement = () => import(`path/to/${component}.vue`)
  }
}

并像setP2Replacement('C1')或setP2Replacement('C3')这样称呼它。

import表达式中的固定部分是必需的，因此Webpack可以使用glob模式包括适当的文件。参见https://webpack.js.org/guides/dependency-management/#require-context

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

用例

问题

2 个答案: