Problem with abnormal behavior when using conditional rendering of nested slots
Vue version
3.2.47
Link to minimal reproduction
Steps to reproduce
When there is no #default
, there is a difference between the two behaviors
What is expected?
Consistent behavior when there is no #default
What is actually happening?
#default
is right.
System Info
No response
Any additional comments?
No response
$slot.header
returns a function. That function, when called, will render the slot content. if there's no slot content, it will return undefined
v-if="$slot.header()"
Be aware that:
- This can have a certain runtime cost as the slot function is essentially a render function creating the vdom for the slot content, which can be relatively expensive if the slot contant is really large.
- Slots sometimes can be "empty" at first glance from but technically still contain an empty
Fragment
vnode, so checking forundefined
wil not necessarily alway be successul:
<your-component>
{{ isCondiotion ? 'yes' : undefined }} //this will lead to a Fragment.
</you-component>
If you need further help, please use Discussions or Discord to ask the community for help.
I don't think it solved this problem. You can take a look at this link, which provides a more concise description of my problem: https://play.vuejs.org/#eNp9Uk1v2zAM/SuaNqAp0NmH3lLXWDb0sB22Yd1RF8ehXbWyJOjDTRH4v5eU7TgBipxM8pHPj+I78I21WR+Br3nhaydtYKrS7b3gwQvOPIRoS6FlZ40L7MAcNGxgjTMdu8Kxq7sjtpmqWb4hQkKEro32gfXSy60Cdk/jq+AiXCNa5OMPkR6TAJ1VVQDMGCs26YPBXGb9V9mgqokKpX3eQVNFFUqvTCjy8/l8JCi2MQSj2bdayfplGUcln45M5TaglrETp86ohOY3+BK4RiPb7NkbjQ91IGrBa9NZqcD9sUHimoKvWUIIq5Qyr79Sjda9mev1E9QvH9Sf/Z5qgv914MH1KOuIhcq1EEb44fE37DE+gp3ZRVriAvgPvFGRNI5t36PeoeyTvqT2Zzqj1O1//7APoP28FAmlziH14xtG+HFh9UXubXab5oQe8BWTKy7bzM2GoZN6PBKeWGp4pKw4EMyoRFdfWWesx98O12tW6bc7QodyhcbCYGYyCjJl2lXiy6bRsWVx39R/4sD0o2In+ynEhBhmD345o0MDIRdWlmacxF5QHkodlSryhWqJT32GKR/eASK4M2w=
why does it return undefined
?
Why does it return function
?