vue.js - 你能在 Vue 模板中渲染 VNode 吗？

Question

我有一种情况，我有一个渲染函数将一些数据传递到一个作用域槽。作为此数据的一部分，我想包含一些由渲染函数构造的 VNode，这些 VNode 可以选择性地由作用域插槽使用。在模板中编写作用域槽以输出接收到的原始 VNode 时是否有任何方式？

Answer 1

View 3

您可以使用 <component>在模板中呈现 vnode:

<SomeComponent v-slot="{ vnode }">
  <div>
    <component :is="vnode"/>
  </div>
</SomeComponent>

这似乎只适用于单个 vnode。如果你想渲染多个 vnode(一个数组)然后使用 v-for或将其呈现为功能组件:

<SomeComponent v-slot="{ vnodes }">
  <div>
    <component :is="() => vnodes"/>
  </div>
</SomeComponent>

或者确保 vnode 是单个 <Fragment>包含子 vnode。

您还可以使用与下面的 Vue 2 方式类似的方法。

View 2

您可以使用功能组件为模板的该部分呈现 vnode:

<SomeComponent v-slot="{ vnodes }">
  <div>
    <VNodes :vnodes="vnodes"/>
  </div>
</SomeComponent>

components: {
  VNodes: {
    functional: true,
    render: (h, ctx) => ctx.props.vnodes
  }
}