The child component slot nests the parent component slot, and the parent component slot is not displayed.
Vue version
3.3.4
Link to minimal reproduction
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
Slots must be placed in direct child elements of the component, nested nodes cannot be used to pass slots.