mitosis: Bug: slots with data
I need a slot in a list in which I can pass around the data of it’s parent. So for example, with a component like this:
import { Slot, Layout, For } from "@builder.io/mitosis";
export default function MyComponent(props) {
const example = [
"asdf",
"dsfdsdf"
]
return (
<div>
<For each={example} >
{
(item) => (
<Slot name={props.slotPage} item={item}></Slot>
)
}
</For>
</div>
);
}
I’d like this ouput in Vue
<template>
<div>
<template :key="index" v-for="(item, index) in example">
<slot name="page" :item={item}></slot>
</template>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "my-component",
});
</script>
In vue you can do: <slot name="page" :item={item}></slot>, however I can’t seem to figure out how to make mitosis do this.
The documentation doesn’t state this as a gotcha, but it also doesn’t state how to do this.
If I need to make a feature request for this, please just tell me and close the ticket.
Thanks,
About this issue
- Original URL
- State: open
- Created 5 months ago
- Comments: 21 (7 by maintainers)
Ah, check. I see now. I was convinced these types were generated for React since it’s the only framework that doesn’t have some kind of slot mechanic. But this makes sense to me.
I’ll continue with solid then.
I may have some backwards compatibility questions when I’m done. But I’ll first see how far I can get this to work across all output types.
No I’m not, I converted react slots from a field to function so data can passed just like in vue, svelte, etc.
However, the type still generates
JSX.Elementinstead of() => JSX.Elementor(slotProps) => JSX.ElementSo, I’d like to take a stab at rectifying that.