Please have a look at this simple example
Testing.vue
<template>
<div>
<slot name="this_is_not_scoped_slots"/>
</div>
</template>
<script>
import Vue from "vue";
export default Vue.extend({
mounted() {
console.log(Object.keys(this.$scopedSlots));
}
});
</script>
MainApp.vue
<template>
<Testing>
<template #this_is_not_scoped_slots>However, it will be displayed in this.$scopedSlots</template>
</Testing>
</template>
<script>
import Testing from "./Testing.vue";
export default {
components: {
Testing
}
};
</script>
In the provided example, the console output will be
["this_is_not_scoped_slots"]Have you ever wondered why this is happening?
In Vue instance, there are two key properties:
this.$slotsthis.$scopedSlots
These two properties behave differently:
- If you use
, thenv-slot:my_scope_name="{ someValue }"my_scope_namewon't appear inthis.$slots - But your named slots will always be visible in
this.$scopedSlots, regardless of how they're defined
Why does this occur?
If you're creating a library and want to conditionally render based on whether the user has provided named slots or not, should you always utilize this.$scopedSlots to detect these slots?