CODEWITHSUNDEEP
vue.js
Mushr00m
Mushr00m

Reputation: 2356

VueJS extends component with slots

I have a BaseModal Component like this :

<template>
    <div class="base-modal" :class="{open: isOpen}">
        <div class="modal">
            <h2 class="modal-title">
                <slot name="title"></slot>
            </h2>
            <div class="modal-content">
                <slot name="content"></slot>
            </div>
        </div>
    </div>
</template>


<script lang="ts">
    import { Vue, Component } from "vue-property-decorator";

    @Component({})
    export default class BaseModal extends Vue {

        public isOpen: boolean = false;

        // Some methods

    }
</script>

I want to create an other modal component that will extend this one and pass it the content for the named slots. Here is where I am :

<template>
    // How to give slots content here
</template>


<script lang="ts">
    import BaseModal from "@app/components/BaseModal.vue";
    import { Vue, Prop, Component } from "vue-property-decorator";

    @Component({
        extends: BaseModal,
    })
    export default class OtherDropdown extends Vue {
    }
</script>

The extends is working but I can't figure out how to pass content to the named slot of the extended component. Not to have to write again all the BaseModal template.

Thanks

I'm using VueJS 2.6.8

Upvotes: 2

Views: 2091

Answers (1)

Derek Pollard
Derek Pollard

Reputation: 7165

You would want to use components named slots like this:

<template>
  <BaseModal>
    <template v-slot:title>
      Some Title
    </template>
    
    <template v-slot:content>
      Some content goes here
    </template>
  </BaseModal>
</template>

You can read more about named slots here: https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots

Hope this helps!

Upvotes: 1

Related Questions