我遇到的情况是,我有一个渲染函数将一些数据传递到作用域槽。作为此数据的一部分,我想包含一些由渲染函数构造的 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(使用前将#替换为@)