slots from useSlots() is not reactive when used in inline functional component

[Zhang-Wei-666]

Vue version

3.4.30

Link to minimal reproduction

https://play.vuejs.org/#eNqdVE1T2zAQ/SuL24EwQx0YOJkknbbDoT20DPTomeLY6yBQJI0kp8lk/N+7Wju2QwMHfLGk91b79kvb6Isx8arCKIkmLrfCeHDoKzNLFYBYGm09bMFiCTWUVi/hhMgnA/CbXpoWicdhE24jQqDkWjlPxqpAS37oD9Nw16jMpMPTw5R7qf0L2mTcSCNRtPG4NDLzyBInMpujBOc3EqdpVAhH2CaBudT5cxoxB+CO74dWwy/jhWaBZC+UqTz4jQnm+SPmz3O9TiNYfVrqAiUdDsURMG78jtkxK3qfihDnuzSw4Ss6uBrJkP1fAK2YLo3kRZSHXXzIeNdawAHl4/1icAPQcu88Oou8ozqXYhE/Oa2o1baBTaESW0i0TUFcGiXASMAyKfXfH3zmbYVnu3NOz4HzJ0cZS2hxa9GhXWEadZjP7AIpoADf3P/ENa07kFJcSWK/Ad6h07LipmHa10oVJHvAY7XfeSKEWvx2N2uPyu2CCkIDs2Z+GtGEhES9Fnov9zK+YrtU1ZTF3XQNZlVmakG18yH4weA2U2WsNo5GqcBSKLwNu0mY5b7On6lFtZaYKahno9Pr4dg6qnJvHWpO1o3Epi3IeHQK0xlkasMq+xvKSuUhrrblidZaWpJoFYx2HTUpxKprL9ixmo/lx3uvx/Fxb9pf0M3dXFviJnBh1kAVEwX5K67BZEVBVUngis4vzg3lauCz+R4z14bFgVM14OHj9uiIsxA3SP0QKrHnfbyvH4AftebruEMW44S89aS170QY8JeD9GeFNrQVtQD1Rnx5HtX/AKgA3EU=

Steps to reproduce

1. 勾选 "Render Append Option" 的 checkbox, 这时候底部将显示是否传入了 append 插槽
2. 切换几次 "Render Append Slot" 的 checkbox, 可以发现底部的内容并没有更新

---

1. Check the "Render Append Option" checkbox, and at this point, the bottom will display whether the append slot has been passed in or not.
2. Switching the "Render Append Slot" checkbox several times, you can find that the content at the bottom does not update.

What is expected?

另一种写法, 以同样的方式使用, 这种是没有问题的

---

Another way of writing it, using the same approach, is perfectly fine.

What is actually happening?

函数式组件无法响应 slot 的切换

---

Functional components cannot respond to slot switching.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i9-13900H
    Memory: 11.29 GB / 31.75 GB
  Binaries:
    Node: 20.12.2 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.5 - D:\Program Files\nodejs\npm.CMD
    pnpm: 9.4.0 - D:\GitHub\mixte\node_modules\.bin\pnpm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.89)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    vue: ^3.4.30 => 3.4.30

Any additional comments?

No response

[orimay]

It doesn't seem to be reactive even inside regular SFCs :c

[kleinfreund]

useSlots not being reactive is unfortunate. In a template, one can use things like v-if="$slots.errors" and have it react to the errors slot being dynamically slotted (though, technically speaking, $slots is also not reactive). However, in a script, one cannot easily (e.g. by watching useSlots().errors) react to a slot becoming slotted.

Possible workaround:

const slots = useSlots();
const hasErrorsSlot = ref(false);

onBeforeUpdate(() => {
  hasErrorsSlot.value = "errors" in slots;
});

I'm running into this while trying to adapt a form control component that computes a bunch of class names and other computed state based on whether there are validation errors. I wanted to simplify the interface of that component to not need to be explicitly told that it is in an error state but rather rely on the errors slot being used.

[johnazule]

This is the best issue I could find, but I would seriously appreciate if slots were reactive? Is this something that is being planned? Is there reasons that this isn't the case?