Slot Example Vue
This page assumes you’ve already read the Components Basics. Read that first if you are new to components.
Slot Content
Vue implements a content distribution API that’s modeled after the current Web Components spec draft, using the <slot> element to serve as distribution outlets for content.
This allows you to compose components like this:
For real-life, powerful examples of scoped slot usage, we recommend browsing libraries such as Vue Virtual Scroller, Vue Promised, and Portal Vue. Unlike the slot mechanism provided by Vue (opens new window) itself, each content distribution is wrapped in a div whose class is content with the name of the slot. You need to ensure the uniqueness of the slot defined. This page assumes you've already read the Components Basics.Read that first if you are new to components. # Slot Content Vue implements a content distribution API inspired by the Web Components spec draft (opens new window), using the slot element to serve as distribution outlets for content. When Vue 2.6.0 was released, Vue introduced a new unified syntax which is (the v-slot directive) for named and scoped slots. It replaced the slot and slot-scope attributes, which has been deprecated, though not removed, they are still document.
Apr 21, 2020 In this tutorial, we will learn about how to use the slots in vue.js with the help of examples. Slots helps us to pass the data between opening and closing component tags. In vue.js props are used to pass the data to its child components, but it is hard to pass when we have a complex code. In such cases slots can be used.
Then in the template for <navigation-link>, you might have:
When the component renders, the <slot> element will be replaced by “Your Profile”. Slots can contain any template code, including HTML:
Or even other components:
If <navigation-link> did not contain a <slot> element, any content passed to it would simply be discarded.
Named Slots
There are times when it’s useful to have multiple slots. For example, in a hypothetical base-layout component with the following template:
For these cases, the <slot> element has a special attribute, name, which can be used to define additional slots:
To provide content to named slots, we can use the slot attribute on a <template> element in the parent:
Or, the slot attribute can also be used directly on a normal element:
There can still be one unnamed slot, which is the default slot that serves as a catch-all outlet for any unmatched content. In both examples above, the rendered HTML would be:
Default Slot Content
Slot Example Vuelos
There are cases when it’s useful to provide a slot with default content. For example, a <submit-button> component might want the content of the button to be “Submit” by default, but also allow users to override with “Save”, “Upload”, or anything else.
To achieve this, specify the default content in between the <slot> tags.
If the slot is provided content by the parent, it will replace the default content.
Compilation Scope
When you want to use data inside a slot, such as in:
That slot has access to the same instance properties (i.e. the same “scope”) as the rest of the template. The slot does not have access to <navigation-link>‘s scope. For example, trying to access url would not work. As a rule, remember that:
Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.
Scoped Slots
New in 2.1.0+
Sometimes you’ll want to provide a component with a reusable slot that can access data from the child component. For example, a simple <todo-list> component may contain the following in its template:
But in some parts of our app, we want the individual todo items to render something different than just the todo.text. This is where scoped slots come in.
To make the feature possible, all we have to do is wrap the todo item content in a <slot> element, then pass the slot any data relevant to its context: in this case, the todo object:
Now when we use the <todo-list> component, we can optionally define an alternative <template> for todo items, but with access to data from the child via the slot-scope attribute:
In 2.5.0+, slot-scope is no longer limited to the <template> element, but can instead be used on any element or component in the slot.
Destructuring slot-scope
The value of slot-scope can actually accept any valid JavaScript expression that can appear in the argument position of a function definition. This means in supported environments (single-file components or modern browsers) you can also use ES2015 destructuring in the expression, like so:
This is a great way to make scoped slots a little cleaner.
Tutorial
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the 'report an issue' button at the bottom of the tutorial.
While basic component slots are all fine and dandy, sometimes you want the template inside the slot to be able to access data from the child component hosting the slot content. For example, if you’re trying to allow custom templates in a container while still retaining access to those containers’ data properties, you’ll want to use a scoped slot.
Slot Example Vue Project
Introduction
Scoped slots are a new feature introduced in Vue 2.1.0. They allow you to pass properties from your child components into a scoped slot, and access them from the parent. Sort of like reverse property passing.
The first step to creating a scoped component slot is to pass properties into a default or named slot from your child component, like so:
Then, to use those properties inside a parent component’s slot content, create a template element tied to the slot. Add a scope attribute to the template element and set it to the name that you wish to access the scope properties from. This essentially creates a local variable for anything inside that template, allowing you to access it as if it was in the parent’s scope.
(For example, scope=“myScope”, properties passed into the <slot> will be accessible as {{myScope.myProperty}} while scope=“yourScope” will be accessed as {{yourScope.myProperty}}.)
Note: The template element does not get added to the DOM. It’s simply a wrapper.
Slot Example Vuelo
Slot-scope Vue Example
If you’re using Vue 2.5 or above, use the slot-scope attribute instead of scope. Also you can skip the template elements.