Slots Vue Js
- Vue implements a content distribution API that’s modeled after the current Web Components spec draft, using the element to serve as distribution outlets for content. This allows you to compose components like this.
- The mechanism of slots in Vue.js makes it easier to create universal, reusable components. Slots are very powerful and at first may seem hard to use, especially the more advanced variants. In this article, I will present a reusable grid component using scoped slots with dynamic names, but to make it easier to understand, I will start with some.
- Vue.js documentation: What are slots? Slots offer a convenient way of distributing content from a parent component to a child component.
Aug 24, 2020 In this article, we will get a full understanding of the vue slots through the practical application of its various use cases. Lets start with know about vuejs slots first. What is Vue Slot? Slots are reserved space offered by vuejs to display content passed down from one component to another.
In the previous post we introduced the Vue.js component model and saw how to pass data to
child components via props and how components can emit events up their parents.
In this chapter we focus on slots which give your components even more flexibility by injecting content into child components.
For this chapter we use a modal dialog as an example.
Slots as Content Placeholders #
We start with the smallest possible modal dialog implementation where the rendering of the modal is done using a v-if directive with the showModal variable.
The showModal value is set to true on button click:
Our modal component children consist of some example HTML heading and paragraph we'd like to show inside the modal dialog.
Additionally, we listen to the @close event in case the user closes the modal dialog by pressing the close button.
Let's have a look at the component:
The modal-body contains a slot component which acts as a placeholder for our content we passed along above. It will not be visible in the browser DOM and will be replaced with our content.
The modal-background class used to render a darkened overlay underneath the modal dialog. Additionally, it emits a click event to close the dialog. The selfevent modifier is used to make sure the event is only emitted when clicking the background and not when clicking the modal dialog itself.
Named Slots #
In our previous example we used the 'default slot' to pass along all content to our modal component. In the next example we improve the modal dialog component further by using 'named slots' which enables users of the component to inject content in multiple places.
In order to become more flexible, we introduce named slots for the header, body and footer. Here is the definition of our markup:
Note the usage of the name attribute for each slot and how each slot is wrapped in another div element. The component has complete control of the styling by using specific CSS classes modal-header, modal-body and modal-footer. And the user of the component can focus on the content only.
Vue Component Slot
The usage of these named slots is quite similar to the default slot:
Slots Vue Js Online
We can use whatever HTML element we want for our content and use the slot attribute to select the appropriate slot we want to use. This not only includes HTML elements but also other Vue.js components.
Note, that the footer slot is not used in this example. By default the existing slot content will be used. In our case the footer slot is defined like this:
React Js
So, we still have our Close button as is.
Slots Vue Js App
Summary #
In this chapter we looked into slots and named slots to compose our components and content in a very flexible way. Stay tuned for my upcoming post on scoped slots!
If you like this post also check out my new course Vue.js Component Patterns Course.