可以在 Vue 模板中渲染 VNode 吗?

2024-05-01

我遇到的情况是,我有一个渲染函数将一些数据传递到作用域槽。作为此数据的一部分,我想包含一些由渲染函数构造的 VNode,这些 VNode 可以选择由作用域插槽使用。无论如何,在模板中编写作用域槽以输出收到的原始 VNode 时是否存在?


Vue 3

您可以使用<component>在模板中渲染 vnode:

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

这似乎只适用于单个虚拟节点。如果你想渲染多个vnode(一个数组),那么使用v-for或将其渲染为功能组件:

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

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

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

Vue 2

您可以使用功能组件来渲染模板的该部分的虚拟节点:

<SomeComponent v-slot="{ vnodes }">
  <div>
    <VNodes :vnodes="vnodes"/>
  </div>
</SomeComponent>
components: {
  VNodes: {
    functional: true,
    render: (h, ctx) => ctx.props.vnodes
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

可以在 Vue 模板中渲染 VNode 吗? 的相关文章

随机推荐