Vue Js Slot Props

This page assumes you've already read the Components Basics. Read that first if you are new to components.

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.

# Prop Types

So far, we've only seen props listed as an array of strings:

Usually though, you'll want every prop to be a specific type of value. In these cases, you can list props as an object, where the properties' names and values contain the prop names and types, respectively:

  • 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.
  • I’m trying to propagate properties from a parent to its children through a slot and I’m unable to do this. Here’s an example: Props propagation through slots I was expecting to get two children receiving the number 1 and two children receiving the number 2 but I’m getting the following error: Vue warn: Duplicate presence of slot 'default' found in the same render tree - this will.
  • It tells Vue which named slot to use, exposes the passed props, which we can destructure. This could be a method or data and works a bit like a render-function in React. Dynamic scoped slots. Right, the final piece of the puzzle. Dynamic scoped slots are much like regular scoped slots, but they have a name derived at runtime.

This not only documents your component, but will also warn users in the browser's JavaScript console if they pass the wrong type. You'll learn much more about type checks and other prop validations further down this page.

# Passing Static or Dynamic Props

So far, you've seen props passed a static value, like in:

You've also seen props assigned dynamically with v-bind or its shortcut, the : character, such as in:

In the two examples above, we happen to pass string values, but any type of value can actually be passed to a prop.

# Passing a Number

# Passing a Boolean

# Passing an Array

# Passing an Object

# Passing the Properties of an Object

If you want to pass all the properties of an object as props, you can use v-bind without an argument (v-bind instead of :prop-name). For example, given a post object:

The following template:

Will be equivalent to:

Vue Js Slot Props

# One-Way Data Flow

Vue Js Slot Props Car Bodies

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

There are usually two cases where it's tempting to mutate a prop:

  1. The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards. In this case, it's best to define a local data property that uses the prop as its initial value:
  1. The prop is passed in as a raw value that needs to be transformed. In this case, it's best to define a computed property using the prop's value:

Note

Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component will affect parent state.

# Prop Validation

Components can specify requirements for their props, such as the types you've already seen. If a requirement isn't met, Vue will warn you in the browser's JavaScript console. This is especially useful when developing a component that's intended to be used by others.

To specify prop validations, you can provide an object with validation requirements to the value of props, instead of an array of strings. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

When prop validation fails, Vue will produce a console warning (if using the development build).

Note

Note that props are validated before a component instance is created, so instance properties (e.g. data, computed, etc) will not be available inside default or validator functions.

# Type Checks

The type can be one of the following native constructors:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

In addition, type can also be a custom constructor function and the assertion will be made with an instanceof check. For example, given the following constructor function exists:

You could use:

to validate that the value of the author prop was created with new Person.

# Prop Casing (camelCase vs kebab-case)

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:

Again, if you're using string templates, this limitation does not apply.

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: Madrid gran via.

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.

Vue Js Slots Vs Props

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

Vue Js Slot Props Free

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:

Props
  • Dart
  • Flutter
  • Vue.js

This is shorthand for v-slot:

Vue Dynamic slots example

Vue Js Slot Props For Sale

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.

Vue Js Slot Props Download

Happy learning! See you again!

Vuejs Slot Prop

Further reading