Can someone please help me understand the concept of scoped slots? I checked out the VueJS documentation, but it seems they explain it through examples rather than a direct definition. So, what exactly is a scoped slot? Is it essentially just a regular slot that receives props from the component?
Another question I have is whether "scoped slots" and "named slots" are mutually exclusive. Can a slot be both named and scoped, such as a "named scoped slot"?
Furthermore, when writing code, what does the term "slot" refer to specifically? Does it refer to the literal <slot></slot>
tag in the component's template (let's say the component is called navigation-link
), like in this example:
<template>
<a v-bind:href="url">
<slot></slot> // Is this considered the "slot"?
</a>
</template>
Or does the term "slot" refer to the actual HTML content we include in the parent component while using the navigation-link
, as shown here:
<navigation-link url="/profile">
<span class="link-text">Your Profile</span> // Or is this HTML content referred to as a "slot"?
</navigation-link>