Slots Vs Props Vue

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

A prop to toggle bold/italics. A prop to decide on the max length of the option label before adding an ellipsis. A prop to use as a key to select a value out an object, if the select can be passed an array of objects to list. A prop to apply a prefix or suffix to option labels. And now you have a select with 50 props. Spread the love Related Posts How to create more complex slots in VueVue.js is an easy to use web app framework that we can use to develop Passing Props to Vue.js Route Components with Vue RouterVue.js is an easy to use web app framework that we can use to develop Create Styled Vue Components Easily. The child component contains a prop called 'signal'. I would like to be able to change data called 'parentVal' in the parent component so that the children's signal prop is updated with the parent's value. This seems like it should be something simple, but I cannot figure out how to do this using slots: Here is a running example below. 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. Scoped slots are a useful feature of Vue that can make components more versatile and reusable. The only problem is they're hard to understand! In this article, I'll go through a step-by-step example so you can see how useful scoped slots are.

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>.

Slots Vs Props Vue Free

• 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

Slots Vs Props Vue On Tv

#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

Vue 2.6 is released with new syntax for Slots using v-slot directive. In this tutorial, we’re gonna show you:

• Syntax to use Vue Slot with v-slot directive along with its shorthand
• How to use Vue Named Slots with v-slot & examples
• How to use Vue v-slot for Scoped Slots & examples
• Vue Dynamic slots example

Related Post: Vue 3 Composition API tutorial with examples

Contents

Vue slots syntax with v-slot directive

With new v-slot directive, we can:
– combine html layers: component tag and scope of the slot.
– combine the slot and the scoped slot in a single directive.

For example, this is old syntax with slot-scope:

This is how we combine ListComponent and template tag:

And this is old named slots syntax:

Now we use new Vue v-slot directive:

You can see that:

– We use <template v-slot:header> to wrap <p> tag instead of <p slot='header'> directly. This is because Vue v-slot can only be used in <component> or <template> html tag. It cannot be used in plain HTML tags (<p> for example).

– We replace slot='content' slot-scope='{data}' with v-slot:content='{data}' by combining slot & slot-scope. With new Vue v-slot directive, all slots are compiled into scoped slots. It improves the performance. Why?

Normal slots are rendered during the parent component’s render cycle. So, if any dependency of a slot changes, both the parent and child components will be re-rendered.

When we use scoped slots, slots are compiled into inline functions and called during the child component’s render cycle. This means:

• data from a scoped slot are collected by the child component which is re-rendered separately.
• the changes of parent scope dependency only affect the parent, not the child component. So the child component doesn’t need to update if it uses only scoped slots.

Shorthand for v-slot

# is the shorthand for Vue v-slot directive.
For example, #content stands for v-slot:content.

The code above can be written as:

Remember that when using shorthand, we must always specify the name of the slot after # symbol. We cannot use shorthand like this: #='{item}'.
It must be: #default='{item}' in which, #default is the shorthand for v-slot:default.

In the next parts, we show you some examples that apply new Vue v-slot directive in practice.

Vue v-slot examples with Named Slots

If we want to use multiple slots in one component, Named Slots are useful.
The code below shows BkrCard component template with 3 slots:

• header
• title
• default

Remember that <slot> without name attribute has the name default.

Now look at the parent component which use v-slot directive to specify name for named slots on <template> tag:

The result will be:

If we pass only one named slot, the default value will be shown:

Vue v-slot example with default slot

In the example above, we use <template v-slot:default> for the default slot.

We have other ways to specify html code to be considered as default slot also:

– wrap it in a <template> without Vue v-slot directive:

– do not wrap it in a <template>:

The result are the same for 2 cases:

Vue v-slot examples with Scoped Slots

What we should do when we want a child component to allow parent component access its data?

In this example, categories need to be available to the slot content in the parent. So we bind the categories as an attribute to the <slot> element:

The categories attribute is called slot props.
In the parent scope, Vue v-slot directive can help us get value of the slot props above:

The result will be:

• Dart
• Flutter
• Vue.js

This is shorthand for v-slot:

Vue Dynamic slots example

We can use a JavaScript expression in v-slot directive argument with square brackets:

Now look at the example:

Clicking on the Change button will change the collection value dynamically.
v-slot:[collection]='{categories}' could become:

• v-slot:default='{categories}'
• v-slot:new_categories='{categories}'

This is BkrCategories component with default and new_categories slot name:

The result will be:

Conclusion

We’ve learned almost aspects of new Vue v-slot directive, from v-slot syntax to its handshort, then apply v-slot directive on Named Slot examples to Scoped Slots and Dynamic Slots examples.

Happy learning! See you again!

Further reading