[SOLVED] VUE - load component only if slot exist

VUE - load component only if slot exist

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.

Solution

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