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

Posted 2023-02-23

【中文标题】使用 render() 函数渲染的组件内的动态组件

【英文标题】：Dynamic component inside a component that is rendered with render() function

【发布时间】：2020-12-17 12:16:56

【问题描述】：

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

知道这怎么可能吗？

【参考方案1】：

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

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

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

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

您只需要模板中的动态组件 <component /> 和 :is 属性，而您无法以编程方式完成。

您可以以this smart-list component from the vue docs 为例。

【讨论】：

谢谢这似乎工作除了一种情况：<component :is="cmp"> 当cmp 是一个空字符串时，没有呈现任何内容并且没有抛出错误，现在我必须放入一个组件或者我得到一个错误

您可以让它返回'div'，而不是函数中的空字符串。它会呈现一个“div”，但至少它不会崩溃。或者，您可以只在元素为真时调用 createElement 函数（如 v-if）。不太清楚内置的“组件”如何处理空字符串，但是使用渲染函数，您必须自己重新实现解决方案。