Components. Some of the real power that Vue provides comes from components. Now that you have the understanding of how the syntax works inside Vue, and though you may not be an expert at it and you'll need to continue to reference the docs on the right syntax. As I find myself doing that still, sometimes I think it's an equal or colon or maybe it's something else or it's the app versus something else, you'll need to do the same with components, and all of the language. What components are going to do, it's going to abstract your code into little reusable components, right?
So to register a component, you can set up Vue.component my-component and then the options that go along with the component. Now there's a bunch of different ways to do components, and the simple way, if you're not compiling code. Now, if you've set up your code with a compiler, it's going to allow you to do a lot more. But I'm assuming you don't have your code set up with a compiler in this video so it's going to be the basic component system. So to write a component, you say Vue.component my-component. My-component would be the component name, and that you want to reference usually with a hyphen if it's got two words or you want to just keep them one word. I try to keep them one word if possible. And of course, I don't want my components to share a same name as an HTML tag.
So I wouldn't want to make a component called H1 as the browser will read that as the H1. So let's go ahead and grab some of this code and we'll go into our code here and paste it above our Vue Instance. So Vue.component my-component. And then if I want to reference the component, I can reference it using the my-component my-component just like an HTML tag would do. And I'm going to remove this list element stuff we did previously and paste the my-component inside. So now, here's the component. So Vue.component my-component and template and then this is where I want to write my HTML. So I'll write it in the template tag here.
So here's my options, and I'm going to specify template and say, div a custom component. Now I'm going to add a little couple of classes to this, I'm going to say 'alert' and then 'alert-prime'. Let's do 'success'. Yes, 'alert-success'. And so now you'll see a custom component and it has that green color from the bootstrap class. So now this is a nice little component that I can make reusable. And any time I want to get a component now, I can specify another component and I have two of them. So very easy to go and start with components.
Now, as we scroll down, there are components. You can also do local registration on components by specifying components and my-component child. I have a tendency to make most of my components global components, as it just seems to be easier to work with, but a local component will work just as well. Here's a couple things to note. Table, my row, my row versus TR, my row. Custom my row will be hosted out as invalid content does cause an error. So when you make things, maybe you just make a table component, and then you want to use those same tags. So that your HTML, even though you can do components, needs to be semantic HTML. So keep that in mind.
Inside of a component, you can specify its own data option, and the data must be a function. So data con and the brackets here. See here is another example here with data equals counter zero, and then data function return data as your value. So if we wanted to say... and then here they're adding a click function on the counter. So we'll take data return data. And if we go into our component itself, we'll put a comma and then reference data, function, return data, and then I can reference the value for data above. And then I can reference data inside of the value here. As you can see that they're doing here inside the curly brackets. So I'll specify data inside here and then data counter, instead of saying, data is counter, I'm going to say is 'Hello world', and we'll put a semi-colon.
Now, if we refresh this, it looks like we made a mistake here. Method data is not defined on the Instance reference during rendering. So maybe we'll check that value. Let's see here counter. They did counter V on click counter, and then counter is the value that they're referencing here. We actually need to go and specify a value like this cause data can't be referenced as the way we set it up. So we would want this to be something like counter and not use counter we'll use name or title, and then curly bracket the value. And then we can reference T-I-T-L-E. We can reference title as the value here, because that's going to return. So now... oh, it looks like we still made a mistake here. So data should return an object.
So as You can see here from the values this is counter plus equals one, and this is counter, I said, Hello world. I put it inside of a string. This is inside of a string. There we go. So you can see again, there's lots of... just look at your console when you make an error and then you'll see the values, and see if you can resolve the error. Most of the errors are easily resolvable, but sometimes it's a little bit trickier. So here you can see a counter, they've made multiple simple counters, and now you can see as you count them, it's going to add up that value. And now all counters have their own initial state. So if I want a counter to go up on each individual, it's going to reference.
So components get complicated and they can get complicated very fast. So again, best is slow down and really think about your architecture. What needs to be a component, what doesn't need to be a component, how are they connecting, how are they working together? So you have a parent and a child, and the parent passes a property to a child and the child emits an event, all right? That seems pretty basic. But for whatever reason, it can get complicated and it can get nasty, messy, at least that's my experience with it. So prompts, here's our component child, and it takes prompts. And then we can specify inside here, the message, and then the value that the message gets, and then that value will be specified in the element.
So let's try one of these out. So we'll say prompts and that's going to be on the component itself. So the component takes a property. Let's make this format all nice. Here we go. The component takes a property of message. I'm going to specify message in here now because that's the component it's going to take. And then instead of setting up data as title like this, I can specify the message... I actually don't even need to work with data now. I can specify the message inside using it as a parameter. So I'll say message is hello and message here is Katz. Now, if I refresh, you'll see hello and Katz.
So now the component is reusable and can get a property and change the value based on that property. If we go down a little bit further, you can see how you might want to set them up, CamelCase versus kebab-case, my message here as an option. I prefer just to keep these simple one words when possible, otherwise using the CamelCase syntax. Dynamic properties, so input v-model parent message, child v-bind my message is parent message. Okay? So let's try one of these out. So we're just going to bind the same thing we did. But this time we're going to bind... notice the binding specification, the value. So as what we did before, if we come up here, it says just message. If we specify the colon there, and then we're going to make a model. So input and the type here is fine. And then v-model equals, and then I'm going to say that the model value is going to be equal to title.
Then title's going to be where hello is. And then I need to set up title inside of our data here. So I used to have items, I now I'm going to have title and title is going to equal to hello. Now, if I refresh this, there's the input field of hello and I write Katz and it's going to pass in the value to the component. Now let's take a look at that one more time. So input type text v-model title, it passes in the value of title. In order to get this to work, we need to put the colon there, which is going to bind the value to the component, and now you can see inside the component or taking the value message. Doesn't matter where it came from for the property, it gets there and it adds to the message. Then we needed to set up title. And that's how we would set up and structure dynamic properties. Here they give you another example where you type and it changes the value.
Literal versus dynamic. So some-prop versus v-bind some-prop and go note that v-bind or the shorthand colon, very important that you know that structure. Now this is where you start to get into the complicated zone. One way data flow. So all properties have one way data binding between child and parent. When the parent property updates, it will flow down to the child, but not the other way around. So you'll also have a tendency as you build your components that you'll want to update the parent. By just saying... and you can write some hacky code to go and do that.
So they're given in additional, every time a parent component is updated, all props of the child components are updated. And that's important to know, it's why they don't update back from the child. So the child doesn't update the parent, is that if the parent updates, it should update all the children. Because if you have more than one child and you update one of the children, you don't want have that child update the parent. So keep that in mind. One way data flow or one way down. So there are a couple ways and a couple of reasons why this is the case. So when tempting to mutate a property, the property is used to pass an initial value, the child component wants to use it as the local data property afterwards, or the properties passes the raw value that needs to be transferred.
The proper answer to these use cases is to define a local data property that uses the props initial value as the initial value. So you can see proper turn counter this dot initial value. Define a computer property that is computed from the props value. So computed, normalized site return this, that size trim to lowercase. So know the options of the Ray JavaScript will only affect the parent state. The child will affect parent state. So that gets you idea of how you might be passing properties to your component. And in addition here, you can see, you can specify some of the options that go along with the property. So prop A is a number, prop B is a string or a number, prop C is a string or it's a required value. Prop D is a number and is defaults to 100 and then prop E and prop F, and you can see these are all under the prop values. And you can set up those values for validation.
Non prop attributes, replacing, merging existing attributes. So again, pretty straightforward stuff with this. You're just passing in some values. So at this point then you can see if you want to make HTML components reusable, it's pretty easy. Say I have a headline or say I have a carousel or some buttons, I can make them into a component and I can make that code be abstracted away. Now where we're going to get to is the point where your components themselves have their own files. So that way your code is not this mega 10,000 page document and it's difficult to track, it's the page or file is designed for that component. So each component would get its own file, which then makes it really easy to go and work with. Now we're not there yet, but that's where you're trying to want to get to, is that each of the files have their own component. So in the next episode, let's talk about custom events on components. All right.