- Learn by example
Make an RPG
Vue Implementations

Example of how to use slots in Vue

This page assumes you have read Component basics.

You can pass content to your template based on what's between your tags. For example:

<big-text> Hello World </bix-text>

You can even pass HTML code between the tags

<big-text> <a href="/">Link</a> </bix-text>

Or you can pass a component

<big-text> <my-navigation></my-navigation> </bix-text>

Named Slots

If you want multiple slots, you can name them and pass several pieces of content into your template with named slots.

<resume> <h4 slot="first_name">Gordon</h4> Skills: HTML, JS, CSS <div slot="references"> Jim Lolaby </div> </resume>
Vue.component("resume", { template: `<div> <h1> <slot name="first_name"></slot> </h1> <slot></slot> <slot name="references"></slot> </div>` });
Can you create your own slot for the address?

In the example above, you see that the contents of any tag can be passed into a slot, using the slot attribute.

Anything that's outside of the slot attributed tags, will get thrown into the standard slot. Observe:

<resume> MySkills <hr/> <h4 slot="first_name">Gordon</h4> Skills: HTML, JS, CSS <div slot="references"> Jim Lolaby </div> </resume>

In the example above, notice how the MySkills text string is at the top, but still get's replaced in the main slot tag. Of course, to keep your template usage readable, you'll want to place things in the order they appear in template.

Default Slot Content

In this example, no value is passed in for the slot:


But, we're providing a default value: "No Name".

Vue.component("resume", { template: `<div> <h1> <slot>No Name</slot> </h1> </div>` });

We can override this default by providing a slot value:


Go ahead and try it in the Code editor. Instead of seeing "No Name", you will now see "Gordon".

Compilation Scope

The contents of the slot you're passing down has the same scope as the template it's being passed into. For example, this does not work.

<resume>{{ theName }}</resume>
Vue.component("resume", { template: `<div> <h1> <slot></slot> </h1> </div>`, data: function() { return { theName: "Johaness" }; } });

However, we can access the parents scope in the slot, as usual. So, this will work because theName is now on the parent Vue instance, not in the component.

var app = new Vue({ el: '#demo', data: { theName: 'Johaness' } });

Scoped Slots

The tricky thing about scoped slots is that they're used when you send one template into another. It's hard to wrap your brain around that.

In the example below, look at the connection between v-bind='theName' and slot-scope="a_name". theName is passed via v-bind into the slot. The scope attribute then allows you to use that object within the template that's being passed down.

<resume> <template slot-scope="a_name"> First: {{ a_name.first }} Last: {{ a_name.last }} </template> </resume>
Vue.component('resume', { template: `<div> <h1> <slot v-bind='theName'></slot> </h1> </div>`, data: function() { return { theName: { first: 'John', last: 'Sulivan' } }; } }); var app = new Vue({ el: '#demo' });

In the next lesson, we will learn about Example of Vue Render function

Get the Latest Tutorial Updates
<< >>