I would like to load a component into a slot only if the slot exists (because I don't want to waste resources creating and mounting the component).
So I did it like that:
Test.vue
<slot :load="true" name="slotNo1"/ Wrapper.vue
<template slot="slotNo1" slot-scope="{ load }"> <Test v-if="load" /> </template> But I wonder if there is an easier way without having to create the "load" variable.
Refer this
Vue.component('Custom', { template: ` <div> <span>always displayed</span> <strong v-if="hasSlotData"> displayed only when slot passed: <slot></slot> </strong> </div> `, computed: { hasSlotData() { return this.$slots.default; } } }); new Vue({ el: '#root' });<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"> <custom></custom> <custom>content</custom> </div>If you wanna control parent, this may help you https://michaelnthiessen.com/advanced-vue-controlling-parent-slots
