Check if slot is implemented by the user.

Syntax

function hasSlot(vm, name, props, options);

Parametrar

vm: { $slots: Record<string, NormalizedScopedSlot | undefined> }

Component instance.

name: string

Name of the slot to check for.

props: Record<string, unknown> Optional

Props required by a scoped slot.

options: Partial<RenderSlotOptions> Optional

Render options.

stripClasses: string[]

List of classes to exclude when extracting slot text.

Default: ["sr-only"]

Returvärde

true if the slot is implemented and have non-empty content, otherwise false.

Usage

Given the following markup:

<my-awesome-component>
    <template #foo>Lorem ipsum dolor sit amet</template>
    <template #bar></template>
</my-awesome-component>

hasSlot(this, "foo"); // --> true
hasSlot(this, "bar"); // --> false
hasSlot(this, "baz"); // --> false

If you use scoped slots you need to pass in the scope:

<my-awesome-component>
    <template #foo="{ name }"> Hello {{ name }}! </template>
</my-awesome-component>

hasSlot(this, "foo", { name: "World" }); // --> true

By default text wrapped by the sr-only class is ignored. This can be changed by setting the stripClasses option to []

<my-awesome-component>
    <template #foo>
        <span class="sr-only"> Lorem ipsum dolor sit amet </span>
    </template>
</my-awesome-component>

hasSlot(this, "foo"); // --> false
hasSlot(this, "foo", {}, { stripClasses: [] }); // --> true