The v-slot directive was introduced in Vue 2.6.0, offering an improved, alternative API to the still-supported slot and slot-scope attributes. The slot and slot-scope attributes will continue to be supported in all future 2.x releases, but are officially deprecated and will eventually be removed in Vue 3. To demonstrate this, we’ll need a completely different example component with slots, one that’s even more contrived than the previous one: let’s sorta copy the example from the docs by creating a component that supplies the data about the current user to its slots: This component has a property called user with details about the user.

我们为每个 todo 准备了一个插槽， Components were always designed to be able to be reused, but some patterns aren’t practical to enforce with a single “normal” component because the number of props you’ll need in order to customize it can be excessive or you’d need to pass large sections of content and potentially other components through the props. If you’re new to Vue or haven’t seen the changes from version 2.6, read on. Now, in the parent scope, we can use v-slot with a value to define a name for the slot props we’ve been provided: In this example, we’ve chosen to name the object containing all our slot props slotProps, but you can use any name you like. Slot name Description; label: The label value that will appear before or after the input element, default is a element. God bless and happy coding. By default, the component shows the user’s last name, but note that it is using v-bind to bind the user data to the slot.

If you’re only using a default slot, you can skip that inner, You can use object destructuring to create direct references to the scoped slot data rather than using a single variable name. What great idea can you think of? There are cases when it’s useful to specify fallback (i.e. Vue Select leverages scoped slots to allow for total customization of the presentation layer. The rationale for introducing the new syntax is described in this RFC. -->. Slots can be used to encompass the “outside” part of the pattern and allow other HTML and/or components to placed inside of them to customize the “inside” part, allowing the component with slots to define the pattern and the components injected into the slots to be unique.

When you’re not using a template, you can skip using the .vue file extension by pulling the JavaScript out of the script tag and just plunking it into a .js file. What ways do you think slots could get an upgrade? Let’s pretend that div is there to create a stylistic frame around its content.

You use it like this: Just like before, if we want to add content to the default slot, just put it directly inside the titled-frame component.
The slot does not have access to ‘s scope. default) content for a slot, to be rendered only when no content is provided. For example, v-slot:header can be rewritten as #header: However, just as with other directives, the shorthand is only available when an argument is provided.

One more thing you’ll need to know is that slots can pass data/functions down to their children. 100 practical cards for common interface design challenges. In cases like above, when only the default slot is provided content, the component’s tags can be used as the slot’s template. In the watch section we watch for changes to the promise and when it changes (or immediately on component creation thanks to the immediate property) we clear the state, and call then and catch on the promise, updating the state when it either finishes successfully or fails. With Bootstrap, your buttons are often strapped with the base `btn` class and a class specifying the color, such as `btn-primary`.


Vue components aren’t all about the HTML and CSS. 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.

With a commitment to quality content for the design community. The content that is between the opening and closing frame tags will get inserted into the frame component where the slot is, replacing the slot tags. Named Slots with the slot Attribute. Joseph Now we can use it everywhere with whatever content you want: Of course, you can go with something much bigger than a button. Sometimes, it’s useful for slot content to have access to data only available in the child component.

Scoped Slots.

There are plenty of other great examples of renderless components out there too.