Skip to content

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

Open
@Zhang-Wei-666

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions