Vue3 使用 render 渲染函数透传组件

背景

我们透传组件的时候可能会用 slot，本文讲述的是另一种方式 props + render 函数方式。当然具体的看业务场景。

实现

父组件

<AComp customComponent: () => {return h(UserAuthorization)
}>
</AComp>

子孙组件

// 定义 render 组件，包裹一下
const RenderComponent = defineComponent({props: { render: { type: Function, required: true } },render() {return this?.render?.() ?? null}
})// customComponent 可以来自 props
<div><RenderComponent :render="customComponent" />
</div>

以这样的方式，父组件就可以传递组件给子孙组件了，也不用关心，中间多个子组件的处理逻辑。当然如何传递 props，看各位的业务需求了。