0

我在文档中看到您可以在 VueComponent 中拥有一个动态组件，如下所示：

<component :is="componentName" v-bind="componentProps" @custom-event="doSomething" />

我试图在动态呈现的组件中包含这些动态组件之一（使用render()函数，而不是 HTML 模板）。没有太多希望，我试过这个：

render(createElement: CreateElement) {
  return createElement('component', props: {
    'is': 'TestComponent'
  });
}

但我得到了

[Vue warn]: Unknown custom element: <component> - did you register the component correctly?

因此，再次，不要太期待奇迹，我尝试将其导入Component并声明为组件：

@Component({
  components: {
    Component,
    TestComponent
  }
})
export default class DynamicThingy extends Vue {
  render(createElement: CreateElement): VNode {
    return createElement('Component', {
      props: {
        'is': 'TestComponent'
      }
    });
  }
}

但后来我得到

[Vue warn]: Do not use built-in or reserved HTML elements as component id: Component

知道这怎么可能吗？

4

1 回答 1

1

的第一个参数createElement()必须是

  • 一个 HTML 标签名称，
  • 组件选项，
  • 或异步函数解析为其中之一。

https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

因此，在渲染函数中，您可以简单地创建一个函数*，它根据您所需的标准返回一个或另一个组件的选项，并将其作为您的第一个参数。*此函数与您编写的用于确定 :is 属性中的内容的函数相同）

您只需要模板中的动态组件<component />和:is道具，而您无法以编程方式进行操作。

您可以使用vue 文档中的这个智能列表组件作为示例。

于 2020-08-28T15:31:46.343 回答