Please see this minimum example
Test.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>
App.vue
<template>
<Test>
<template #this_is_not_scoped_slots>But it shows in this.$scopedSlots</template>
</Test>
</template>
<script>
import Test from "./Test.vue";
export default {
components: {
Test
}
};
</script>
In the above example, this console will log out ["this_is_not_scoped_slots"].
Why is this happening?
There are two properties in Vue instance
this.$slotsthis.$scopedSlots
These two act really differently:
- If you use
v-slot:my_scope_name="{ someValue }", thenmy_scope_namewon't show up inthis.$slots - However, no matter what you define, your named slots will always show up in
this.$scopedSlots
Why is this happening?
I'm building a library, I want to conditional rendering if the user has provided named slots or not, should I always use this.$scopedSlots to detect those things?