如何在Solara中创建可包裹子组件的Vue包装组件

在Solara中使用Vue组件作为容器时，默认不会自动将with块内的子组件渲染到Vue的默认插槽中，需要显式配置插槽映射才能实现。

原不生效代码 #

Vue组件（wrapper-cont.vue）：

<template>
  <div style="background:red; padding:15px">
    I was expecting children to be below:<br>
    <slot />
  </div>
</template>

<script>
export default { } 
</script>

Solara组件定义：

@solara.component_vue("wrapper-cont.vue")
def WrapperCont():
    pass

页面组件：

@solara.component
def Page():
  with WrapperCont():
     solara.MarkDown("child 1")
     solara.MarkDown("child 2")

修复方案 #

需要在Solara的Python组件中定义children参数，并通过component_vue的slots参数将children绑定到Vue的默认插槽（名称为default）。

修改后的Solara组件定义：

@solara.component_vue("wrapper-cont.vue", slots={"default": "children"})
def WrapperCont(children=[]):
    pass

或者更简洁的写法（当Vue组件只有默认插槽时，Solara会自动将children参数映射到默认插槽，可省略slots配置）：

@solara.component_vue("wrapper-cont.vue")
def WrapperCont(children=[]):
    pass

修改后，Page组件中的子组件就会正确渲染到Vue组件的<slot />位置。

内容的提问来源于stack exchange，提问作者Iftah