Slots Vs Props Vue
Vue comes with two different ways of storing variables, props and data.
Vue.js has slots in order to make components have a redefinable structure, but by themselves they're pretty limited. Sometimes you need some data or state in order to define how a component should render. If you don't know slots, I suggest you learn them first on the Vue.js docs. Scoped slots is an advanced feature in Vue.js that allows you to. Slots can be used to change the look and feel of the UI, or to simply swap out text. # footer 3.8.0+ Displayed at the bottom of the component, below.vsdropdown-toggle.
- The child component contains a prop called 'signal'. I would like to be able to change data called 'parentVal' in the parent component so that the children's signal prop is updated with the parent's value. This seems like it should be something simple, but I cannot figure out how to do this using slots: Here is a running example below.
- Reusable Vue Search Select with Scoped Slots by Jonathan Harrell (@jonathanharrell) on CodePen. Other uses for render props & scoped slots. Creating reusable interface components isn’t the only use for render props and scoped slots.
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
dataoption 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.
Slots Vs Props Vue Online
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:
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.
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.
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!
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:
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:
Slots Vs Props Vue App
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
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:
Slots Vs Props Vue Free
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.