vue icon indicating copy to clipboard operation
vue copied to clipboard

slots not re-rendering while passing `$scopedSlots` to children

Open woshiguabi opened this issue 1 year ago • 1 comments

Version

2.7.14

Reproduction link

codesandbox.io

Steps to reproduce

Click the change button

What is expected?

slot re-rendering

What is actually happening?

slot not re-rendering


To reproduce this issue, two conditions must be met

  1. Both slot and scopedSlot are passed to the parent component
  2. The parent component passes $scopedSlots to the child component

After deconstructing $scopedSlots this issue resolved, but this issue is important for library developers because passing $scopedSlots is a very common usage.

woshiguabi avatar Aug 17 '23 03:08 woshiguabi

I think it might be because you directly passed this.$scopedSlots into Inner.data.scopedSlots, which led to the implicit property $stable that was originally defined in Wrapper.$scopedSlots also being transferred to Inner.data.scopedSlots. So this is why using the spread operator works fine, because the spread operator does not expand implicit properties.

excepted

image.

actually(in your example)

image

And then, due to Vue's slot optimization mechanism, it ultimately led to the following logic... image So, Vue reused the previous scoped slot object, thereby reducing the rendering overhead.

yunchuan123 avatar Dec 21 '23 04:12 yunchuan123