New (2.6 ) slot syntax results in slots not added to vm.$slots, breaking existing render functions
See original GitHub issueVersion
2.6.1
Reproduction link
https://jsfiddle.net/3kpf9u54/4/
Steps to reproduce
- Observe the contents of the
<template>
displayed - Change the code from
<template slot="content">
to<template #content>
or<template v-slot:content>
and observe the contents stop being displayed - Change the render function code from
this.$slots.content
tothis.$scopedSlots.content()
and observe the contents be displayed again
What is expected?
Contents are displayed all the time; old render functions don’t break when used with new syntax
What is actually happening?
New syntax forces slots into being scoped, breaking existing render functions
I’m actually not sure if this is intentional or not, but it breaks Vuetify, and probably other things too. Assuming this is intentional, it makes writing functional components more difficult, as you have to either:
- check both
this.$slots
(for Vue pre-2.6) andthis.$scopedSlots
(for Vue post-2.6) - only check
this.$scopedSlots
and ask Vue pre-2.6 users to addslot-scope
everywhere so all slots become scoped - only check
this.$slots
and ask Vue post-2.6 users to use the legacy syntax
Issue Analytics
- State:
- Created 5 years ago
- Comments:8 (5 by maintainers)
Top Results From Across the Web
Please note that slots are not reactive - Stack Overflow
The example you're referring to is using this snippet of code. Vue.component('blog-post', { render: function (createElement) { var header ...
Read more >How to fix - Slot invoked outside of the render function in vue 3
Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the...
Read more >Vue 3 Migration Changes: Replace, Rename, and Remove (Pt ...
On a related note, if your code is using the $scopedSlots property, that has to be renamed to $slots in Vue 3. Functional...
Read more >Migration to Vue 3 - GitLab Docs
In Vue 2.6 slot attribute was already deprecated in favor of v-slot directive. ... To fix rendering slots in shallowMount , we need...
Read more >NFS in NetApp ONTAP. Best practice and implementation guide
This guide covers the latest available ONTAP versions ... Table 29) 50x 500MB files using dd — NFSv3, 65536 slots — VM dirty...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
i made a simple test and v-slot still dont add the slots in $slots fiddle My bad, i was using vue 2.6.0, its corrected in 2.6.10
In 0e8560d0 I’ve made it so that only slots using the new
v-slot
syntax without scope are exposed onthis.$slots
. This should ensure intended behavior without affecting existing usage of legacy slots.