Check out a free preview of the full Introduction to Vue.js course:
The "Refactoring into a Component" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

Using a previous example, Sarah refactors the modularizes the code base by creating components. Sarah takes questions from students.

Get Unlimited Access Now

Transcript from the "Refactoring into a Component" Lesson

[00:00:00]
>> Sarah: We talked about components and we have a bunch of demos already. Let's take one of the demos we already worked on and actually start using them with components, instead of just having everything living in the view instance. It's not very common, but you're just gonna stick every single thing inside of the view instance.

[00:00:16] You're actually usually gonna have that view instance and create components off of it. So let's refactor. We had this before, we have our little comment form, like we ate lunch and then we can put that comment onto the forum. And to review, we had that new comment was just an empty string.

[00:00:38] An array of comments and then we had our add comment which pushed onto that array and cleared out that string. And in the <ul> we have an <li> that's common in comments and there's the comment. But we're repeating ourselves with that <li>, this is not necessarily a refactor that I would do, but it's gonna get us to the next step.

[00:01:01] We talked a little bit about that template string that we could do. Since we're redoing that <li> again and again, what we could do is put it in a string and have that <li> be encapsulated here. So let's actually go into code pen and take a look. I'm gonna collapse these guys so you can see it a little bit better.

[00:01:22] Our comments form, our view instance looks pretty much the same, but we're declaring above the vue instance, this vue.comment, and this is individual-comment, and here's our template, and we're passing down the props of comment post. Then when we look in our <li>, we have this <li> is individual-comment.

[00:01:45] So what that will do is establish a relationship between this individual-comment, and this is individual comments and whatever is in that template will be output there. So what changed? We have the li that's here and then we have that is, which is here. And that's what's changing, that's what we're using.

[00:02:07] That is is a special piece of markup that we're using. But, you know, that was just basically a step because, really, in comment forums, we don't just like write the comment and there's no other information. We usually have the person's avatar, and their name, and what they said, and stuff.

[00:02:24] And you can see how, when we're, if we're using a template string, this no longer makes sense. If I was going to put all of this stuff in a template string, that template string would get really big and a little bit, you know, hairy. I would lose syntax highlighting and all that kinda stuff.

[00:02:38] So maybe that's better as a component. Now I can repeat that component over and over again. That's a little bit more clear. So in the JavaScript, we have individual comment, but now for the template, we're saying the comment is this comment template. We're defining an ID. And this is a query selector, so we could use classes, or whatever.

[00:03:05] But again, I use IDs in these incidences, because I really wanna make sure there's just one reference to it. I don't wanna, have multiple classes there, so it kind of does that for me. And then, in the HTML, we'd have this, and this is a new little piece of markup that won't look familiar to you, it's this wrapping of the script type x-template, and then we have this id="comment-template", and then we have the template which is the ID of common template.

[00:03:33] So that means that this component will use whatever is inside of this bit of markup. When we move into like of vue-cli/builds, these will be structured totally different. But if you want to use vue in an existing application and you don't have that kind of build set up, you could use components that are a little bit larger in your application and make them this special little script type.

[00:04:00] And basically what will happen is HTML, CSS, JavaScript will not understand that script type it will just pass over it and it won't parse it. But vue will go look for it. So it is a clever little way of working around it. And grabbing that piece and turning it into a component, yeah?

[00:04:16]
>> Speaker 2: So, in your HTML, you have an <li> take. And you're saying it is a comment, but it is a component, but then your component template also has an <li>. So is it replacing?
>> Sarah: Yeah, I think actually I should have probably used <span> for that, now that I think about it.

[00:04:36] But I think you can, I mean I think like two nesting <li>s is okay but not really good markups.
>> Speaker 2: So, your original <li> remains in any attributes you put on it. And then, the content of the template goes inside of it?
>> Sarah: You know, I'm not sure.

[00:04:50] Let's go look. Because we can see this pretty easily from the DOM. So if we go over here.
>> Sarah: It's just one <li>. So it is actually replacing that one. So it's basically saying, taking that template and replacing that existing <li> with that. But I think, there might be a better way of structuring that code so that there's not a duplication of <li>s.

[00:05:17] I could have used a div or something else in that area.
>> Speaker 2: Is it like merging the properties? Cuz you have other things on there like v-4 and those other properties on your master <li>.
>> Sarah: It's not, It's not merging them, it's basically taking that whatever the inner text is and using the inner text.

[00:05:40] So it's the same thing as like if you are replacing the inner text in straight up JavaScript. Does that make sense? So it's still using the directives that's on that component, but it's replacing the inner text that's inside of that.
>> Sarah: So then if we go back to this, if we have that individual comment, we have a bunch of things in here.

[00:06:06] We have comment post to author image, so you can assume that I have a thing called comment post to author. So we have this object that has the author image The author and the text. So basically the really important part here that we changed, was taking this template and pointing to this id and it is pointing to this id in the html.

[00:06:29] Let's go look basically at this component as well so you can see what we are doing exactly. We've got these comments are now not an array anymore, it's now, well it's still an array, but we have objects that we're using to pass all of those down. So if we look at this <li>, we can still say is individual comment, but then we can pass in all of that information and to have images, and small tag, and ptag, etc.

[00:07:02] So, another option, is that we could do a local component. This is only available to you if you're all using it within the same file, as the same as the view instance. So, it's not if you're starting to split things up, you still need to use this vue.component.

[00:07:20] But if it's all in the same file, you could write const IndividualComment and then the template in the props. So that's kind of a nice clean way of writing that, and we're doing that all in CodePen in one file, so we're able to do that if we wanted to.

[00:07:35] I use the other syntax because it's more flexible, if I wanted to keep it in a different file or put it in one, then I could do so. So in here, if we wanted to use this const individual comment and designate it this way, we would then have to in our view instance say components, and individual component is, our individual comment is, individual comment.

[00:08:02] So we would have to then say that we're using some components. And that's where it is, so that's the changes that we would have.