vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
45.61k stars 8k forks source link

Functional components cannot respond to slot switching. ( 函数式组件无法响应 slot 的切换 ) #11227

Open Zhang-Wei-666 opened 1 week ago

Zhang-Wei-666 commented 1 week ago

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