Can you use scoped slots with render functions? #9544
Unanswered
KyleBrown-804
asked this question in
Help/Questions
Replies: 2 comments
-
Yes you can, here is an article that uses the exact same example from the official vue docs https://geistjs.com/blog/vue/vue-scoped-slots-with-render-functions |
Beta Was this translation helpful? Give feedback.
0 replies
-
Here is a bare bones example // parent component
export default {
setup() {
return () => h(MyComp, null, {
default: ({ text }) => h('p', text)
})
}
} // child component
export default {
setup(props, { slots }) {
const text = ref('hi')
return () => h('div', null, slots.default({ text: text.value }))
}
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
For context:
I am in the process of implementing UI component library upgrades from Vue 2 -> Vue 3. I have a more complex component that involves a tighter parent / child relationship. One core issue is that slots cannot emit to their parent components, however I need to pass some objects to the parent directly. I can see the potential to achieve what I need with scoped slots, however I need to achieve this functionality with render functions.
I can see examples of this in Vue 2 using
this.$scopedSlots
like here: https://codedamn.com/news/vuejs/vuejs-scoped-slots-render-functions-component-design (See the "Combining Scoped Slots and Render Functions" section). However I have found no other instances of anyone achieving this with Vue 3 so I just want to know is it currently possible?.What's off the table due to other constraints:
EDIT:
I see in Vue 2
this.$scopedSlots
has been moved to justthis.$slots
in Vue 3 per: https://v3-migration.vuejs.org/breaking-changes/slots-unification.html#overview. However I am unsure how in a render function syntax using the composition API, that I could reference slot props passed up to the parent?I am aware that I can get slots as such:
However I need to also get slot props such as in the example here: https://vuejs.org/guide/components/slots.html#scoped-slots where in a template case you would use
v-slot="slotProps"
. Maybe I'm just missing something?Beta Was this translation helpful? Give feedback.
All reactions