- [Narrator] We don't normally work with
a single component, we create a series of sub-components
with different parts of the application.
So, let's go ahead and do that.
I'm going to create another file here,
in the components folder, and this one
is going to be called CurrentSong.vue.
Now here, I want to use a template
and I have a series of shortcuts installed
and you'll see that when I type the letter 'v' right here
it shows a drop down menu, and it shows me
this thing called vbase.
Now, to get those, you can go to this url
and it's just a series of snippets
created by Sarah Drasner, they're pretty cool.
So this just gives me a template with the basics
of a component, you can see that there is a template section
a script section, as well as a style section.
A sub component doesn't really need to have styles
and we have pasted pretty much all the styles
into App.vue, normally you would want to put
the styles and different components but,
I'm not really worrying so much about
the CSS in this course, I've given it to you
all in the main component which is fine.
But, in here, we do want to pay some additional code
for a template, so I'm going to get that
from this location.
So, let's go ahead and grab this piece of code
right here for some HTML that has some bootstrap tabs
already assigned as classes.
Now, we'll come over here,
we'll go ahead and paste that code in.
And, we'll need to go ahead and add the name
and the description.
Now, the name and the description are going to come
in a variable that is going to be accessible
in this component called song.
So, I'm going to say song.name,
and over here I'm going to say song.description.
And, in the script section, I'm going to add
a name here, I'm going to call the component current song
so this will be the name of the tag that we use
to place this component in the main component
and then, we're going to ask that this component
receive a piece of data.
So this is going to receive it
through something called Props.
Props are like HTML properties, so like for example
when you say class here, that's sort of a property of
this div tag and on an image tag
you might have a source property.
So, this is kind of how we pass information to
our sub-components, and we're going to say here
that this component is expecting a prop called song.
So, we'll need to pass it along into this component.
So, now we have essentially the component that we need here
I'm going to save this, and I'll need
to bring that component into this app.vue file.
So, I'm going to get rid of this class of container
because we don't need it anymore.
And, I'm also going to get rid of all this stuff
right here, because I've already pasted all the HTML.
Now, it's really important that when you create
a component, that it has a single div,
the current version of ujs will only
let you create a component with kind of
a single outside div.
In addition to this, we're going to need to create
the current song tag, or the component in here
and we can use this slash notation.
And then, we'll need to go ahead and pass along
the song, or create a song variable, or a song prop
in the component and we are going to assign that
the value of current song.
So there should be a variable in this main component
that has the value of the current song
so that's two R's.
So, we're going to take this name and description,
and we'll get rid of this show description variable here.
And we'll call this new variable, currentSong.
Create an object, and just paste those two parameters
right there, so now we have a variable
in this main component called currentSong
that has the name and description for our current song
And, we're passing the valley of that variable
along into our sub component through a variable called
song, and that's what this means right here.
Now, because we are using that sub component
we need to do a couple of things to register it
essentially just to let the application know where it is
so, we'll need to use an import statement
and this import statement will say
it's going to import CurrentSong from,
you can say ./ components, CurrentSong
and, this needs to be in quotations here.
Now, you can use the @ sign, the @ sign instead of this dot
the @ sign just means the current folder, so
go to the current folder and look for
the component sub folder, and then look for
the CurrentSong file.
Interestingly enough, we don't have to use the extension.
Also, notice that, when I'm importing a component
I'm not using these curly braces,
this is for when you're importing libraries
So, you're just importing a single component
where the default sort of thing that outputs from
CurrentSong that you filed so, it looks like that.
In addition to importing the sub component,
we will need to register it.
Registering it just lets the current component
know about it so even though we've imported it
we need to make sure that we kind of
initialize it I guess would be something close to it
So, we'll say we're also using, in addition to importing it
we're also using this CurrentSong component
and when you save that, you should see your application
look like this, which it's using all the CSS
that we've created down here that I have collapsed right now
to make that look nice but,
essentially what we're doing here is we're importing
a sub component, make sure that we register it
and then passing along information about the current state
through a prop.
We receive that prop into our sub component
right here, and we use this
current song tag here
to display that component in the main app.vue file