英文:
How to make a wrapper vue component in Solara
问题
我想在Solara中创建一个新的Vue.js组件，用于包装子组件。
我希望子组件会在该组件的默认插槽中渲染，但这并没有发生。
你如何让children组件在Vue组件内部渲染？
示例（不工作的）代码：
<template>
<div style="background:red; padding:15px">
我期望子组件在下方：<br>
<slot />
</div>
</template>
<script>
export default { }
</script>
@solara.component_vue("wrapper-cont.vue")
def WrapperCont():
pass
@solara.component
def Page():
with WrapperCont():
solara.MarkDown("child 1")
solara.MarkDown("child 2")
请注意，这些示例代码中的HTML和Python代码是不需要翻译的部分。
英文:
I want to create a new vuejs component in Solara that will wrap children.
I was hoping the children components will render in the default slot of the component, but this did not happen.
How can you make the children components to render inside the vue component?
Example of (not working) code:
<template>
<div style="background:red; padding:15px">
I was expecting children to be below:<br>
<slot />
</div>
</template>
<script>
export default { }
</script>
@solara.component_vue("wrapper-cont.vue")
def WrapperCont():
pass
@solara.component
def Page():
with WrapperCont():
solara.MarkDown("child 1")
solara.MarkDown("child 2")
答案1
得分: 1
Vue.js的插槽机制尚未被Solara使用。
相反，您需要将children传递给您的组件，并在循环中使用jupyter-widget组件来渲染它们。
示例代码如下：
<template>
<div style="background:red; padding:15px">
Children will appear below:<br>
<jupyter-widget v-for="child in children" :key="child" :widget="child"></jupyter-widget>
</div>
</template>
@solara.component_vue("wrapper-cont.vue")
def WrapperCont(children=[]): # 请注意将children作为属性传递
pass
注意：目前尚未对此解决方案进行文档化，因此可能是内部API。它是在Solara源代码download.vue中找到的，因此如果它变得过时，建议查看那里以获取更新的解决方案（并更新此答案）。
英文:
The slot mechanism of vuejs isn't used (yet) by Solara.
Instead you need to pass children to your component and render them in a loop using the jupyter-widget component.
Like so:
<template>
<div style="background:red; padding:15px">
Children will appear below:<br>
<jupyter-widget v-for="child in children" :key="child" :widget="child"></jupyter-widget>
</div>
</template>
<script>
export default { }
</script>
@solara.component_vue("wrapper-cont.vue")
def WrapperCont(children=[]): # Note passing children as property
pass
Note: The solution is currently not documented, so it might be internal API. It was found in Solara source code download.vue, so if it becomes obsolete I suggest to look there for updated solution (and update this answer).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论