Subscribe on changes!

The child component slot nests the parent component slot, and the parent component slot is not displayed.

avatar
Sep 20th 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqlU8tu00AU/ZVhQEqRGluorIIbtaBKwAIqQGKBWTj2TTLF89DMdRop8icgsWLJgg3b/lThN7gzfsQJVQRiY/nec+77zIafGxOtKuATnrjcCoPMAVZmmiohjbbINszCnNVsbrVkI6KOeugys6CwRaK4MX220ZOec17hsmd4o8NTlWvlkEm3YKe+xtHoOZSlZu+1LYt7o4epSuKmJWqGDARpygyBLMaS5aPpZhOC6zqJyQpeoUyFbDWWuoDyNOWEp7yBmu7CP1mhrUlGX2KhraClBbCrxO5rA7Yr2YKzClGr6c+vN7ffvyVxa/ax8U6b3uFLdQZms3KbLUE7zIzF9PbL518/bihJMczYsei3j0/adZMxqMmPOTra61wsoiunFZ1149kpz7U0ogT72qCgvad8wgLisYzWfv0y+Pwqjjt/voT80x3+K7f2vpRfWnBgV7S8HsPMLgAb+OLtK1jTfw/SWaqS2AfAN+B0WfkeG9rTShXU9oAXun0R1CXU4p27WCMo1w0VbknMOvBTTmp7dmD0bbsn0UmIS1VNW9xq+d9exn+quhArUq+YkygfuFKji1oF9vJMvJupTAJxejBuNUHxfaJhwC6+K5juUd4xaDOLsdo4mqaAuVBw6a2jD3QHikv5x8MTdQ23QzUxzLez20Sz0rHMzJ5uG2D3aNRsI44lonGTOM4LRWH05MXKRgowVkbGZ0SLbaVQSBgXWp7RhaPHtAKHQ3cETo5nVl+TkinJQGg+PsjbjkkMBVgvw78ruxc2LL0H/VG+F2H9G40Y3/g=

Steps to reproduce

Display operate based on permissions

operate slot is the parent component slot

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg">
  <Parent>
    <Auth :auth="true">
      <template #operate>
        <button>Create</button>
      </template>
    </Auth>
    <table>
      <tr>
        <td>name</td>
      </tr>
    </table>
  </Parent>
</template>

What is expected?

operate slot display

What is actually happening?

operate slot is not displayed

System Info

System:
    OS: Linux 6.5 Archcraft
    CPU: (8) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 1.24 GB / 15.59 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    pnpm: 7.33.2 - ~/.nvm/versions/node/v18.16.0/bin/pnpm
  npmPackages:
    vue: ^3.2.47 => 3.3.4

Any additional comments?

No response

avatar
Sep 20th 2023

Slots must be placed in direct child elements of the component, nested nodes cannot be used to pass slots.

avatar
Sep 20th 2023
<Parent>
    <template #operate>
        <Auth :auth="true">
          <button>新增</button>
        </Auth>
    </template>
  </Parent>
avatar
Sep 20th 2023

As Alfred Skyblue said