• Vue Slot-scope Props Not Defined
• Vue Get Slot Props
• Vue Js Slots

Displayed at the bottom of the component, below .vs__dropdown-toggle.

Slot props allow us to turn slots into reusable templates that can render different content based on input props. This is most useful when you are designing a reusable component that encapsulates data logic while allowing the consuming parent component to customize part of its layout. Vue.js has slots in order to make components have a redefinable structure, but by themselves they're pretty limited. Sometimes you need some data or state in order to define how a component should render. If you don't know slots, I suggest you learn them first on the Vue.js docs. Scoped slots is an advanced feature in Vue.js that allows you to. I found a way to get access tot the scoped slot props outside of the slot but it’s a hack. Make a component to just receive a prop( the scoped slot provided prop). And do with it whatever you want. But there has to be a better way.

When implementing this slot, you'll likely need to use appendToBody to position the dropdown.Otherwise content in this slot will affect it's positioning.

• search {string} - the current search query
• loading {boolean} - is the component loading
• searching {boolean} - is the component searching
• filteredOptions {array} - options filtered by the search text
• deselect {function} - function to deselect an option

#header3.8.0+

Displayed at the top of the component, above .vs__dropdown-toggle.

• search {string} - the current search query
• loading {boolean} - is the component loading
• searching {boolean} - is the component searching
• filteredOptions {array} - options filtered by the search text
• deselect {function} - function to deselect an option

#list-footer3.8.0+

Displayed as the last item in the dropdown. No content by default. Parent element is the <ul>,so this slot should contain a root <li>.

• search {string} - the current search query
• loading {boolean} - is the component loading
• searching {boolean} - is the component searching
• filteredOptions {array} - options filtered by the search text

#list-header3.8.0+

Displayed as the first item in the dropdown. No content by default. Parent element is the <ul>,so this slot should contain a root <li>.

• search {string} - the current search query
• loading {boolean} - is the component loading
• searching {boolean} - is the component searching
• filteredOptions {array} - options filtered by the search text

#no-options

The no options slot is displayed above list-footer in the dropdown whenfilteredOptions.length 0.

• search {string} - the current search query
• loading {boolean} - is the component loading
• searching {boolean} - is the component searching

#open-indicator

The open indicator is the caret icon on the component used to indicate dropdown status.

#option

The current option within the dropdown, contained within <li>.

• option {Object} - The currently iterated option from filteredOptions

#search

The search input has a lot of bindings, but they're grouped into attributes and events. Mostof the time, you will just be binding those two with v-on='events' and v-bind='attributes'.

If you want the default styling, you'll need to add .vs__search to the input you provide.

#selected-option

The text displayed within selected-option-container.

This slot doesn't exist if selected-option-container is implemented.

• option {Object} - A selected option

#selected-option-container

This is the root element where v-for='option in selectedValue'. Most of the time you'll want touse selected-option, but this container is useful if you want to disable the deselect button,or have fine grain control over the markup.

• option {Object} - Currently iterated selected option
• deselect {Function} - Method used to deselect a given option when multiple is true
• disabled {Boolean} - Determine if the component is disabled
• multiple {Boolean} - If the component supports the selection of multiple values

#spinner

• loading {Boolean} - if the component is in a loading state

Learn how to master slots and scoped slots, to build flexible and reusable vue.js components.

Follow the course to get an email notification when a new lesson is published.

• 7 of 10 lessons
• 30 min
• Advanced

About the course

In this course, you'll learn how to use slots and scoped slots to create flexible and reusable Vue.js components.

Slots allow us to pass components and HTML to components, giving us greater control of the appearance than what we get with props.

Slots do not replace props. The two features have different purposes.

During the course, you'll learn:

• When and how to use slots
• What scoped slots are
• How to work with dynamic named components
• How to compose components with reusable component patterns

Slots

Vue Slot-scope Props Not Defined

Scoped Slots

What you will learn

• What are slots and scoped Slots
• What are the benefits of using slots
• How to compose components with slots

Share this course

Who's behind the course

Vue Get Slot Props

Aleksej Dix - Teacher

Aleksej is an eager front-end developer who loves to share his knowledge through teaching, public speaking, and organizing meetups and conferences in Switzerland.

Rolf Haug - Contributor / Reviewer

Rolf has been in development industry for 16 years. Long-time entrepreneur and consultant currently working on educational content and workshops.

Alex Kyriakidis - Contributor / Reviewer

Vue Js Slots

Alex is an educator and consultant, core member of the Vue.js team and author of the first best-selling books on Vue.js.