How to Reuse Vue Components With Slots
Vue offers various ways that components can communicate with each other. This communication can be between two unrelated components, or between a parent and child component. Vue achieves this with features including props, provide/inject, and slots.
Find out how to use slots to allow parent and child components to communicate in your Vue applications.
What Are Slots?
Slots in Vue act as placeholders within a child component’s template. These placeholders allow you to pass content from parent to child components dynamically.
Similar to props that pass data and functions from parent to child components, slots allow you to pass template content from parent to child components. This lets you create more reusable components with different HTML content.
The Basic Syntax of Slots
Vue is renowned for its ability to enhance HTML with custom tags that let you quickly build flexible web applications. Slots are no exception. In Vue, a unique slot tag lets you set placeholders in child components to inject HTML content.
To define a slot within a Vue child component, use the element within the component’s template. Consider this basic example:
This example showcases a simple Vue component containing a singleslot. You can pass content into the slot in this child component from a parent component. This content will replace the slot element when Vue renders the child component.
To use the slot, pass content to the child component from the parent component:
The above code block represents a parent component that imports and uses the child component from before. The child component takes in the message"This is the child component"inh1tags and replaces the placeholder with this message.
Slots let you define layout structures and compose complex components by slotting in different content blocks. This is especially beneficial when you’re creating reusable UI components or building layouts with interchangeable sections.
Name Your Slots to Use More Than One
When you’re working with different components, you might need to define more than one slot in a child. This might be because your child component can have different sections like a header and a footer or a card title and body.
Vue allows you to define slots with names to reference a specific slot when passing content from the parent component.
For example:
The above code block depicts a child component that represents a card. This card component defines two slots with twonameattributes:titleandbody. it’s possible to reference either of these slots and pass content to them individually.
To pass content into named slots, use thev-slotdirective in the parent component:
This parent component uses the child component and passes in content for the title and body of the card. Vue injects the content within the template blocks into the corresponding slots in the child component.
As with other directives in Vue, like thev-fordirective for list rendering, you need to attach thev-slotdirective to an HTML tag. You should usually attach it to atemplatetag.
Like other Vue directives, v-slot has a shorthand: the # symbol.
Default Content for Slots
You can define slots with default content that will display when you don’t pass any down from the parent component. You can achieve this by simply placing content within theslotelement.
In this example, if the parent component does not provide any content for the slot, Vue will set the HTML content to the content in the child component.
How to Use Scoped Slots
Scoped slots let you use data from the child component when injecting HTML content from the parent component. This is very useful when you need to render data that you defined in the child component.
Here’s an example of how you can use scoped slots:
This child component defines two variables: avalue, representing a name, and anage, representing a number. The example then defines a slot and passes these two variables, similar to howyou use props when creating Vue components.
You can now access these variables from the parent component by attaching the v-slot directive to the child component’s tag:
Thev-slotdirective attached to theChildComponenttag allows this parent component to receive data from the child component and use it within the slot content. TheslotPropsobject represents the shared data.
Within the slot content,{{ slotProps.value }}and{{ slotProps.age }}display the shared data with interpolation, a technique forbinding data in Vue.
When working with named slots, attach thev-slotdirective to atemplatetag. For example:
The above code block describes a parent component’s use of a child component. The parent component attaches thev-slotdirective to twotemplatetags, using the shorthand for naming. Thev-slotdirectives allow the parent component to use data from the child component when rendering HTML content.
Now, consider the child component that the parent component uses in the code block below:
This child component uses named slots to differentiate them. Vue reserves the name attribute as a unique identifier for a slot tag. The child component passes the title and body attributes to the parent component.
Slots Are Not the Only Vue Component Feature
Slots are a powerful feature in Vue that allows you to create reusable components with customizable content. By understanding the syntax and use of slots, you can build more flexible and modular Vue.js applications.
Vue provides other component features, such as composables and props for component communication. As a Vue developer, it is necessary to have an advanced knowledge of these features.
Learn how to level-up your event handling with Vue’s v-on directive.
Goodbye sending links via other apps.
You’ve been quoting these famous films wrong all along!
This small feature makes a massive difference.
Taming data is easier than it looks.
The key is not to spook your friends with over-the-top shenanigans.
