• 在Vue中，slot是很实用的api，父组件可以很容易通过插槽向子组件插入内容，插槽还分为单个插槽，多个插槽和作用域插槽。 在React中，能不能实现和插槽一样的功能呢？当然有了，我们分别来看.
• Scoped slots are one of Vue's most powerful features, but it can be a bit tricky to understand how they work when first learning about them. In this screencast (taken from my Advanced Vue Component Design course), I walk through how thinking of scoped slots as function props can make it a lot easier to wrap your head around them.
• Slots can be useful for when you just don’t know what will be needed. For example, you have a select input component. You could create a prop to allow the user to decide on the style of the option label. A prop to toggle bold/italics. A prop to decide on the max length of the option label before adding an ellipsis.

• Vue Slots Vs Props Play
• V Slot Vue
• Vue Slots Vs Props Free

You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

Vue.js - The Progressive JavaScript Framework. This change unifies normal and scoped slots in 3.x. Here is a quick summary of what has changed.

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

In 2.6.0, we introduced a new unified syntax (the v-slot directive) for named and scoped slots. It replaces the slot and slot-scope attributes, which are now deprecated, but have not been removed and are still documented here. The rationale for introducing the new syntax is described in this RFC.

Slot Content

Vue implements a content distribution API inspired by the Web Components spec draft, using the <slot> element to serve as distribution outlets for content.

This allows you to compose components like this:

Then in the template for <navigation-link>, you might have:

When the component renders, <slot></slot> will be replaced by “Your Profile”. Slots can contain any template code, including HTML:

Or even other components:

If <navigation-link>‘s template did not contain a <slot> element, any content provided between its opening and closing tag would be discarded.

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.

Fallback Content

There are cases when it’s useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided. For example, in a <submit-button> component:

We might want the text “Submit” to be rendered inside the <button> most of the time. To make “Submit” the fallback content, we can place it in between the <slot> tags:

Now when we use <submit-button> in a parent component, providing no content for the slot:

will render the fallback content, “Submit”:

But if we provide content:

Then the provided content will be rendered instead:

Named Slots

Updated in 2.6.0+. See here for the deprecated syntax using the slot attribute.

There are times when it’s useful to have multiple slots. For example, in a <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:

A <slot> outlet without name implicitly has the name “default”.

To provide content to named slots, we can use the v-slot directive on a <template>, providing the name of the slot as v-slot‘s argument:

Now everything inside the <template> elements will be passed to the corresponding slots. Any content not wrapped in a <template> using v-slot is assumed to be for the default slot.

However, you can still wrap default slot content in a <template> if you wish to be explicit:

Either way, the rendered HTML will be:

Note that v-slot can only be added to a <template> (with one exception), unlike the deprecated slot attribute.

Scoped Slots

Updated in 2.6.0+. See here for the deprecated syntax using the slot-scope attribute.

Sometimes, it’s useful for slot content to have access to data only available in the child component. For example, imagine a <current-user> component with the following template:

We might want to replace this fallback content to display the user’s first name, instead of last, like this:

That won’t work, however, because only the <current-user> component has access to the user and the content we’re providing is rendered in the parent.

To make user available to the slot content in the parent, we can bind user as an attribute to the <slot> element:

Attributes bound to a <slot> element are called slot props. 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.

Abbreviated Syntax for Lone Default Slots

In cases like above, when only the default slot is provided content, the component’s tags can be used as the slot’s template. This allows us to use v-slot directly on the component:

This can be shortened even further. Just as non-specified content is assumed to be for the default slot, v-slot without an argument is assumed to refer to the default slot:

Note that the abbreviated syntax for default slot cannot be mixed with named slots, as it would lead to scope ambiguity:

Whenever there are multiple slots, use the full <template> based syntax for all slots:

Destructuring Slot Props

Internally, scoped slots work by wrapping your slot content in a function passed a single argument:

That means the value of v-slot can actually accept any valid JavaScript expression that can appear in the argument position of a function definition. So in supported environments (single-file components or modern browsers), you can also use ES2015 destructuring to pull out specific slot props, like so:

This can make the template much cleaner, especially when the slot provides many props. It also opens other possibilities, such as renaming props, e.g. user to person:

You can even define fallbacks, to be used in case a slot prop is undefined:

Dynamic Slot Names

New in 2.6.0+

Dynamic directive arguments also work on v-slot, allowing the definition of dynamic slot names:

Named Slots Shorthand

New in 2.6.0+

Similar to v-on and v-bind, v-slot also has a shorthand, replacing everything before the argument (v-slot:) with the special symbol #. 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. That means the following syntax is invalid:

Instead, you must always specify the name of the slot if you wish to use the shorthand:

Other Examples

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.

For example, we are implementing a <todo-list> component that contains the layout and filtering logic for a list:

Instead of hard-coding the content for each todo, we can let the parent component take control by making every todo a slot, then binding todo as a slot prop:

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:

However, even this barely scratches the surface of what scoped slots are capable of. For real-life, powerful examples of scoped slot usage, we recommend browsing libraries such as Vue Virtual Scroller, Vue Promised, and Portal Vue.

Deprecated Syntax

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 full rationale for introducing v-slot is described in this RFC. 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.

Named Slots with the slot Attribute

Deprecated in 2.6.0+. See here for the new, recommended syntax.

To pass content to named slots from the parent, use the special slot attribute on <template> (using the <base-layout> component described here as example):

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 for any unmatched content. In both examples above, the rendered HTML would be:

Scoped Slots with the slot-scope Attribute

Deprecated in 2.6.0+. See here for the new, recommended syntax.

To receive props passed to a slot, the parent component can use <template> with the slot-scope attribute (using the <slot-example> described here as example):

Here, slot-scope declares the received props object as the slotProps variable, and makes it available inside the <template> scope. You can name slotProps anything you like similar to naming function arguments in JavaScript.

Here slot='default' can be omitted as it is implied:

The slot-scope attribute can also be used directly on a non-<template> element (including components):

The value of slot-scope can 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:

Using the <todo-list> described here as an example, here’s the equivalent usage using slot-scope:

Vue comes with two different ways of storing variables, props and data.

These can be confusing at first, since they seem like they do similar things, and it's not clear when to use one vs the other.

So what's the difference between props and data?

Data is the private memory of each component where you can store any variables you need. Props are how you pass this data from a parent component down to a child component.

In this article you'll learn:

• What props are, and why this data only flows down, not up
• What the data option is used for
• What reactivity is
• How to avoid naming collisions between props and data
• How to use props and data together for fun and profit 💰

What are props?

In Vue, props (or properties), are the way that we pass data from a parent component down to it's child components.

When we build our applications out of components, we end up building a data structure called a tree. Similar to a family tree, you have:

• parents
• children
• ancestors
• and descendants

Data flows down this tree from the root component, the one at the very top. Sort of like how genetics are passed down from one generation to the next, parent components pass props down to their children.

In Vue we add props to components in the <template> section of our code:

In this example, we are passing the prop cool-prop a value of 'hello world'. We will be able to access this value from inside of my-component.

However, when we access props from inside of a component, we don't own them, so we can't change them (just like you can't change the genes your parents gave you).

Note: While it's possible to change properties in a component, it's a really bad idea. You end up changing the value that the parent is using as well, which can cause lots of confusion.

There is a lot more to props than this. In fact, I wrote a comprehensive guide on using props that teaches all you need to know about props in Vue.

But if we can't change variables, we're kind of stuck.

This is where data comes in!

What is data?

Data is the memory of each component. This is where you would store data (hence the name), and any other variables you want to track.

If we were building a counter app, we would need to keep track of the count, so we would add a count to our data:

This data is private, and only for the component itself to use. Other components do not have access to it.

Note: Again, it is possible for other components to access this data, but for the same reasons, it's a really bad idea to do this!

If you need to pass data to a component, you can use props to pass data down the tree (to child components), or events to pass data up the tree (to parent components).

Props and data are both reactive

With Vue you don't need to think all that much about when the component will update itself and render new changes to the screen.

This is because Vue is reactive.

Instead of calling setState every time you want to change something, you just change the thing! As long as you're updating a reactive property (props, computed props, and anything in data), Vue knows to watch for when it changes.

Going back to our counter app, let's take a closer look at our methods:

All we have to do is update count, and Vue detects this change. It then re-renders our app with the new value!

Vue's reactivity system has a lot more nuance to it, and I believe it's really important to understand it well if you want to be highly productive with Vue. Here are some more things to learn about Vue's reactivity system if you want to dive deeper.

Avoiding naming collisions

There is another great thing that Vue does that makes developing just a little bit nicer.

Let's define some props and data on a component:

Vue Slots Vs Props Play

If we wanted to access them inside of a method, we don't have to do this.props.propA or this.data.dataA. Vue let's us omit props and data completely, leaving us with cleaner code.

We can access them using this.propA or this.dataA:

Because of this, if we accidentally use the same name in both our props and our data, we can run into issues.

Vue will give you a warning if this happens, because it doesn't know which one you wanted to access!

The real magic of using Vue happens when you start using props and data together.

V Slot Vue

Using props and data together

Now that we've seen how props and data are different, let's see why we need both of them, by building a basic app.

Let's say we are building a social network and we're working on the profile page. We've built out a few things already, but now we have to add the contact info of the user.

We'll display this info using a component called ContactInfo:

The ContactInfo component takes the props emailAddress, twitterHandle, and instagram, and displays them on the page.

Vue Slots Vs Props Free

Our profile page component, ProfilePage, looks like this:

Our ProfilePage component currently displays the users profile picture along with their name. It also has the user data object.

How do we get that data from the parent component (ProfilePage) down into our child component (ContactInfo)?

We have to pass down this data using props.

First we need to import our ContactInfo component into the ProfilePage component:

Second, we have to add in the component to our <template> section:

Now all the user data that ContactInfo needs will flow down the component tree and into ContactInfo from the ProfilePage!

The reason we keep the data in ProfilePage and not ContactInfo is that other parts of the profile page need access to the user object.

Since data only flows down, this means we have to put our data high enough in the component tree so that it can flow down to all of the places it needs to go.

If you enjoyed this article or have any comments, let me know by replying to this tweet!