使用 render() 函数渲染的组件内的动态组件

Question

我在文档中看到您可以在 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

知道这怎么可能吗？

Answer 1

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

An HTML tag name,

component options,

or async function resolving to one of these.

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

因此，在渲染函数中，您可以简单地创建一个函数*，该函数* returns 一个或另一个组件的选项基于您想要的标准，并将其作为您的第一个参数。 *此函数与您编写的用于确定 :is 属性的内容的函数相同)

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

你可以用this smart-list component from the vue docs作为例子。

使用 render() 函数渲染的组件内的动态组件

Dynamic component inside a component that is rendered with render() function

vue.js

vue-component

vuejs2

vue-class-components