- We've talked a little bit along the way
about strategies for cleaning up our templates.
One of the most effective tools that Vue offers us
in that regard is its component system,
which allows us to encapsulate sections of our template
and make them easier to reason about and debug.
Let's target a section of our template
for component extraction. We'll start with
something simple like the "read more" link here
and to make it even simpler, we're going to
temporarily change this to a static href
attribute and just put the URL for the guide
there instead of "read more" URL.
But, we'll leave the "read more" data property
down there so that we can reintroduce it soon.
What using components will enable us to do is
remove this element from the template.
I'm going to cut it to the clipboard
and then we can replace it with a custom element
that I'll call "read more" that will look something
like this with open and closed tags.
You'll want to keep the tag names of your custom components
lowercase for now, and include a hyphen if possible
to help ensure that it's valid HTML
and also not a tag name that already exists.
And then to define, "read more", we can go all
the way down here and use app, which points
to our view instance and with the component
method, we can say that this app uses a component
with the tag "read more" and next
we have an options object. It's very
similar to the options object that we use when
we declare the main instance, but
because we're not mounting it on a certain element,
but just making it available through the use
of a custom tag, we need to define its template.
So I'm just going to paste what I cut
before inside these single quotes and note
that if I were to break this up into multiple lines,
maybe something like this, I would have to
escape each new line with a backslash so
that, that would still be valid JavaScript.
Finally, we need to make sure that when
we mount our view app already knows
about the read more component.
So we'll change this a little bit.
First, we're going to just create the app
then register the component and then call app.mt
Now, if this is starting to feel like jumping
through hoops just to encapsulate some markup
and a custom tag, and if the idea of putting
the component template in a string and having
to escape new lines all feels a bit messy to you,
then let me just say that I completely agree,
but in a larger, more complex app,
using components is an absolute must.
And, there's a much simpler and more powerful way
to use components that doesn't involve
expressing the template as a string,
but as plain HTML in a separate file.
It does require setting up a build tool,
such as web pack, so for now we're going to stick
with this approach as our introduction to components.
So now let's refresh and we see the same thing
as before our read more link
that we can click to get to the Vue.js guide and
let's take a moment to look at this in view dev tools
so I'm going to click the view tab over here again
and I can see my route instance with its data
and computer properties over here on the right.
And I also see that I now have a child component
that's called "anonymous component".
You might be expecting to see the "read more"
name here after all, it's surrounded
by angle brackets, but when using components
defined like this if we want to see a different
name in the view dev tools, we'll need
to add a name property.
So I can just add name and here, the casing doesn't matter.
I could use Pascal case like that, "read more".
And then when I refresh now you see the
"read more" component.
So the pane on the right is blank
because this component doesn't use any dynamic data.
And in fact, components don't have direct access
to a parent component's data.
So in the next video, we'll talk
about how to share data with child components.