Original subtitles

Welcome to this sidebar.

Sidebars are lectures you don't have to take immediately.

It's a lecture you can revisit later whenever you want.

It's not required to watch this lecture to continue on with the course.

It's completely independent.

I throw in sidebars to provide additional information about a topic.

In this lecture we're going to discuss what slot properties are and how they work.

They're a topic we're going to encounter in the next lecture.

I want to use this opportunity to discuss what slot properties are before diving back into validation.

We're going to be working on a separate project for this topic.

In the resource section of this lecture, I provide a zip file, download it, install the packages

and start the server.

Pause the video if you need to.

Let's quickly review the files.

I generated the project with the default preset slot.

Properties are a view feature.

It's not required to install any other library.

Aside from view, I've made modifications to two files the app and hello world component files.

We'll start with the app component.

Inside this file we're importing and registering the Hello World component.

There's nothing else going on in the script block.

In the template block we're using the Hello World component with opening and closing tags.

We're going to add slots to the component, so we'll need to use opening and closing tags.

Open the Hello World component.

The template block has an empty set of div tags.

We're going to add slots to it in a moment in the script block the data function is defined.

There are two properties called user and favorites.

The user property contains random information about a user.

The favorites property is a list of their favorite things.

The data is not being used anywhere in the application.

You can safely ignore it for the time being.

We'll get to it soon.

The objective is to add slots to the Hello World component.

This way we can allow for content to be inserted in between the div tags.

Add the slot component.

We're not going to assign it a name.

It's going to be the default slot.

Let's switch over to the app component file to insert some content inside.

The Hello World component will add a paragraph element with the following message Hello World.

This will result in the message appearing in the slot we have in the hello world component.

Switch over to the browser to view the message.

It's getting inserted like we wanted.

That's great.

We'll want to take it to the next level.

Back in, the editor will want to make the content more dynamic.

The message is static.

It would be great if we could update the message to greet the user.

The user information is stored in the Hello World component.

Theoretically, we can move the data from the Hello World component to the app component.

However, there is an alternative approach.

We can take a much more flexible one.

We can use slot properties to pass information to a slot children.

Let's look at how that's done in the Hello World component.

We're going to bind a property to the slot component.

We'll call the property user.

The value for this will be the user property we have in the data object by binding a property to the

slot component.

It will become available in the parent scope.

In this example, the parent scope is the app component.

We'll switch back to the app component.

If we would like to use the user object in the content, we need to add the the slot property to the

hello world component in the template.

The V slot property requires an alias for the list of slot properties.

We're going to call it V.

The V alias will represent every property bounced to the slot component.

Binding one property which is the user data object.

We can use it in our content.

I'm going to replace the word world with the expression v dot user name.

The name we selected for the alias is entirely optional.

It's common practice to name it V or slot props.

Let's give things a test.

Switch over to the browser to view the app.

On the page, we can see that the message has been updated.

It's greeting the user by their name.

This output is precisely what we wanted.

Slant properties allow you to send data to the parent scope.

There are a couple more things I want to go over in regards to slot properties.

First, the the slot directive is available in versions 2.6 and up.

It's a new syntax feature added to view.

It simplifies the process of using slot properties.

Secondly, there's a shorthand syntax for using slot properties.

Let's go back to the editor to use it.

We can altogether remove the V slot directive from the Hello World component.

The shorthand syntax is the LB character.

We're required to set the name of the slot after the pound character by default.

If we don't set a name for our slot, it'll be set to default.

We'll need to add default after the pound.

Another handy feature of slot properties is being able to structure the object.

You can bind as many properties to the slot component as you'd like.

If you're only going to use one or two properties.

You may want to consider structuring the object, all the structure, the object to retrieve the user

property.

Then in the template block, we'll update the expression to user name.

This can hopefully shorten some of the code you have to write.

Lets view the browser to check for breaking changes.

The name still gets rendered.

There's not much else to slot properties.

You can create as many slot properties as you'd like back in the editor.

Let's switch to the Hello World component.

As an exercise, try binding the favorites data property to the default slot, then use it in the app

component.

Pause the video and give it a try.

Welcome back.

If you are able to add a new slot property then congrats.

If not, that's fine as well.

We'll do it together.

Open the Hello World component.

We'll bind a property called Favorites to the slot component.

Its value will be set to favorites.

By the way, you don't have to keep the names the same.

You can call this whatever you want.

I recommend keeping the names the same for consistency.

The favorites data property is available in the parent scope.

Let's use it.

Switch to the app component file in the template block.

We'll need to de structure the favorites property from the object.

It's important to structure the object.

Otherwise we won't be able to access the favourites array.

After restructuring the array, we're going to add on to the message.

I like favorites zero.

The favourites data property is an array where accessing the first item in the array.

If you'd like, you can loop through the items.

We'll keep it simple by outputting the first item in the array.

Let's use the app in the browser.

The message renders the first item in the favorites array.

That's great.

We've successfully learned how slot properties work.

They're handy for passing on data to the parent scope.

In the resource section of this lecture, I provide a link to the scoped slots documentation page.

This page will provide you with more information and examples of slot properties.

I recommend reading it after you finished this lecture.

In the next lecture we will continue with form validation in our project.