Slots Vs Props Vue
This page assumes you’ve already read the Components Basics. Read that first if you are new to components.
Hi, I wonder if it would be good to have something like this. (maybe it's already achievable via current Vue functional, but I didn't find it) Imagine I have a 12 rows Grid component that has props of xs, sm,md and lg, has a single slot. Passing Props using Vue Slot Scope By combining your components with slots, you can pass the component’s data into slot using slot-scope. You can pass props down from Parent components to Child components without coupling them together. Go to the App.vue file and inside the template tag, wrap the Layout inside a Settings tag.
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.
A prop to toggle bold/italics. A prop to decide on the max length of the option label before adding an ellipsis. A prop to use as a key to select a value out an object, if the select can be passed an array of objects to list. A prop to apply a prefix or suffix to option labels. And now you have a select with 50 props.
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:
Or even other components:
If <navigation-link> did not contain a <slot> element, any content passed to it would simply be discarded.
Named Slots
- 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.
- This page assumes you’ve already read the Components Basics.Read that first if you are new to components. 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.
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
Slots Vs Props Vue Online
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.
So far we learned the basics of Vue and how to set up a nice workflow with Parcel. But what if we want to make our app look nice?
Tell you what — why don’t we make our counter appear green when it’s over 1, red when it’s below 0 and grey when it’s 0. The logic should look like this;
How would you do this?
We start with the Counter.vue component.
I prepared 3 classes — .red, .green and .grey — each corresponding to their appropriate color.
Notice I’m passing the grey class to our sum span.
Well, it works — it’s grey like we told the sum to be. But it’s not turning green when it’s over 0 and it’s not turning red when it’s below 0.
We need to hook it up with Vue bindings!
Can you figure out how to do it? Remember our v-bind or the shorthand; this lets us write logic inside HTML.
Ready? Here’s the solution;
Pay close attention to the class — it’s no regular class, it’s a Vue binding — which means we can insert logic and conditionals.
Applying conditionals for styles is straightforward. Left side is the class name and on the right side is when that class is applied/conditional.
Cool! There’s just one thing bothering me — the inline logic looks bad if there’s more than 1 conditional.
Let’s refactor the class conditionals to a method — more specifically to a computed property.
Computed properties
Putting too much logic in your templates can make them bloated and hard to maintain. That’s why for any complex logic, you should use a computed property.
Computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed.
Creating our first computed property
There we go! We have our first computed property — much easier to read and we get more performance since computed properties are cached and only compute when they need to — when the conditionals are met in this case.
Slots Vs Props Vue On Tv
Great job, we have covered most basic building blocks for Vue by now! See how intuitive Vue is? I love how there’s literally no plumbing involved.
Parent-child communication
When we’re building single page applications, we often have components which communicate with each other. The most common pattern we come across is the parent-children relationship.
Here’s an example parent to children component hierarchy;
We pass props from parent to children and emit events from child to parent.
Slots
Every modern app has so-called “container” components. In a nutshell, container components handle the logic and “components” handle the views (markup).
Here’s an in-depth explanation of the concept; it applies to all modern frontend frameworks.
Slots Vs Props Vue App
Let’s refactor our counter by moving the counter to a separate and reusable component.
Introducing slots
As you noticed by now, there’s a new element in our template. It’s called slot
When the component renders, the slot element will be replaced by the content passed to it.
Import the Header.vue to our Counter.vue like so;
Now we have access to the Header component which renders the title passed to it.
Slots Vs Props Vue Free
If we check the browser you might notice something interesting.
Everything changes color! What if we only want the number to change based on the sum.
Named slots for the rescue!
Named slots are a way we can control which content goes where.
We can give a name to our slot element like so;
named slots; notice the name attribute on the slot
Parent renders regular HTML elements with a special attribute;
Named slots notice we pass the class to the sum only
Tada! That’s all there is to slots!
Remember; The slot element is a placeholder for future content. A named slot is when we have more than 1 slot per component. The whole concept behind slots is to make code reusable as much as possible.
There we go!
Here’s the source code
Here’s my twitter, you might find more useful stuff there!
Thanks for reading!