This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Introducing Components" Lesson
[00:00:00]
>> Sarah Drasner: Probably most of you are familiar with components, but just in case you're aren't, component is a collection of elements that's encapsulated into a group that can be accessed through one single element. So if we have a bunch of things that were just collected together, I can say callout, and that's an abstraction of all of that mark up.
[00:00:18] It's going to grab all of that mark up and I can reuse it as I need to. So here is as simple as possible component. We did the simplest possible template, here's the simplest possible component. I can say, new view, EL, app, and that's our app. And then we have a thing called child which you might notice is not typical markup that we use, we don't usually call something child.
[00:00:41] We say vue.component and then we can say child and that will create that component that we can access. And we can create a template and anything now inside of this template, will be placed inside of child, instead of just directly in the view instance. So slightly better, with props, if you are coming from a react background this is gonna be super review for you, but in case you aren't we're gonna cover it.
[00:01:08] So basically there is a lot of times that you want to reuse a component but you need to change little pieces of it. You need to like reuse it and have it you know output slightly different things depending on your uses that enter props, props are really great for this.
[00:01:24] So if we have something like this view instance and I have something on it like this message, hello Mr. Magoo, in props I can say text, and this template divText inside of here. Then, remember I mentioned that vBind was really, really powerful? It's that colon one, this is gonna dynamically bind to those props.
[00:01:49] The thing to note here is that, that components is calling everything text, like that component can call it whatever it wants. So I could change this to taco, of course I'm gonna piclk taco, taco, taco and taco.
>> Sarah Drasner: And that will work as well. Because it's just using what's inside that component, what you've defined.
[00:02:15] I could write anything there. What's going to be passed down is going to be this message. So if I say message, then I'm gonna, it's going to pass it down from the child, from the parent to the child. So I could also alternatively say, other message the food got here stop talking Sarah, and [LAUGH] I could then pass in other message.
[00:02:52] And they will output that instead. So I can actually change the data that is getting passed out.