Slot forwarding with render functions #10847
Replies: 1 comment 1 reply
-
I've been giving this some thought, but I still haven't really come up with an approach I'm happy with. If you're exclusively using render functions, then perhaps you could switch to using a props to pass down the slots, rather than using actual slots? Many of the usual benefits of true slots don't really apply if you're just using render functions. Another approach might be to use the The But I'm not really happy with that approach. It works OK in this example, but it could block updates if the I feel like there's a trick here I'm still missing, but I figured I'd share those ideas for now, maybe they'll work in your specific use case. |
Beta Was this translation helpful? Give feedback.
-
For a few years now, we have been writing our Vue components using render functions rather than Vue's templating language. This allows us to write our components in plain JavaScript with no compilation step.
Until now we have had no problems. However, my teammate recently made a component that "forwards" its default slot to a child component. The component hierarchy looks like
A
->B
->C
.A
passes content intoB
's default slot, and thenB
forwards its slot content toC
. So far so good.Our problem is that whenever
B
re-renders, the slot content is also re-rendered, leading to serious performance degradation. You can see the problem manifest in this Playground. Notice how the timestamp follows the cursor as you move the mouse around the preview. Now, the timestamp should not change. The render function passed in byA
(Date.now
), is not reactive and so only needs to be called once.Interestingly, when the same set of components is written using Vue templates, the correct behaviour emerges. You can see that in this Playground.
Selecting Follow.vue's "JS" tab reveals the compiled template code. This is the working render function, and it appears to be aware that the slot is being forwarded:
My question is, how do I get the behaviour of the working example using only render functions? Is it possible?
Beta Was this translation helpful? Give feedback.
All reactions