 All right. Hello, this is Christian. So welcome to another video with me today. We're going to look at Component Communications and ViewJS. So this is the Learning Unit 13, and I do apologize for the delay of delivering this unit because I basically lost all the content and had to go back and try to find where I could. So that's why it's a little bit late. But we're going to look at communications using the View Framework. As you can see here, there are a couple of ways how components communicate. When we say communication, we are talking about passing data between two components, right? And one of the most common, I guess, ways is to pass data from a parent component down to a child and from the child up to the parent or from sibling to sibling or things like that. So you can see here that View pass data, and usually the same for all frameworks, as far as I know, it's always in one direction only from the parent down to the child. We're passing data in that direction and we pass data through a property called props. And then when you pass data, if you want to pass data from the child up to the parent, you cannot do that directly. So you have to go through some kind of event or function that the parent can actually receive or can listen to. And then once we see that event, you can actually receive the data from the child to update your data in the parent component. So again, here are just some things here. When I look at just the two things, look at the props and how you emit data from the child using the emit function and the custom event. So for example, you have the root component and then we have the subcomponents down here and how they pass data up and down the tree is what we're going to do today. So let's go into the IDE over here and I show you. This is we'll take a look at the View project, the View seal light first. OK, because it's only built into the program. I'm going to go and just make some modifications and we'll walk through the process of how that works. And then we'll jump into the CDM version. So this is the root template. We're going to bind to this ID right here. OK, so we're not going to touch this at all. And then in the main JS file, this is right here. This is the root root file where the entry point to the program. Now, let's look into the component app component right here. I'm going to just close this for now. So here we have the script, the template and the style. If you look at the template, it has a tag. One, the header tag, these are just regular HTML tag. We have the hello world. That is this hello world here. We have two components imported into this root component, the hello world component and the welcome component. So we use them in here. The hello goes right here. And then the welcome goes in the main tag. I'm going to go and turn off the main tag down here, the welcome component. Just do a control back tick. I mean, control question mark. And it should reflect on the right side that is now gone. So what you see here is basically the logo, which is part of the parent component or the root component. That's this logo up here. These two lines of text are actually coming from the hello world component, which is the child component. So if I turn this off, you're going to see that just the logo is running on the right side. So we have one parent component, data independent component, and then these are the child components. So let's take a look at the hello world component here. Now this file, this tag, we import it up here. Now this is what's using the composition API. When you see the script tag that has the word set up next to it, this is an indication that it's using the composition API. So when you import components using the composition API, like you see here, the hello world and the welcome here, you can just use it right away in your template tag like this. If you're using the other approach, you have to manually register those into the components attribute or property before you can use it in your template. And we'll go over that later. So here, what you see here is the hello world tag, which is the child component. And then we pass something to that child component. This is how you pass data from the parent component down to the child component via properties. So here MSG equals a text call you did it is the property. So the MSG is the property, the name of the property, or the key, if you want to call it that. And then the content that it contains is this thing inside the pair of quotes. That's what we see over here. If you change that, you see it reflects on the right side right away. That is just a regular string of text you pass to MSG and then so forth. So therefore, when you pass this down to the child component, how does it receive it? So let's take a look at the hello world right here. I'm going to go right click on it and go to definition. So here is the hello world file. Now same thing, template, style, and things like that. So I'm not going to focus on the scope by the style. It just let's put away down here. We don't want to see that. It's confusing. So we have the template here. And then we have this script again set up. So this is using the composition API as well. And then you can see right here a function. Let me break this down a little bit for you can see. A function called define props. This is a built-in function built into a view framework. You use that to define or to receive props or properties from the parent. If you don't have any data passing from the parent, you don't need this function. Then that's fine, right? But since we do need the data called MSG, we need to define the function and use the function here. So you can see that is this function takes a property, the purple color base here. Inside there you have just again, bunch of keys and value pairs, right? Now the property name is called MSG. This name must match the name you gave out here when you pass it to the child component. So what have you called here MSG? You have to pass it down and use that MSG as well. Now as far as I know, they have to be in lower case just to be safe. If you have an uppercase, it may not work. All lower case is better, okay? So MSG receives that data. This is a string literal assigned to a property called MSG. It goes down to the child component where I assign that in here. The MSG colon, you have a curly brace over here. This just tells you that you're expecting this, you know, MSG message to be a type string and it is required. Now whether you put a record or not here, that's not gonna crash your application. This is usually used only when you want to validate your data. No, we're not gonna do that because you don't have time to do that. But only for validation purposes. If you don't validate at all, then usually you could just take this whole thing out and you must assign that MSG to a certain type. I can't just leave it like that, okay? If you leave like that, I'm not sure it'll work on C. As you can see it broke, okay? So you have to assign that to something of a certain types. You can put a colon. If you wanna put a zero, that's fine. As long as it's assigned to something, then that's fine. The zero means like it will infer that to be a number type. If you expect this MSG to be a string, then you put string class here, okay? If you want it to be a number, you put number, right? You put a boolean, whatever, just so it kind of give you an indication of what that type you expect to receive. It doesn't mean like if it will boolean, I'm gonna receive a number, it's gonna crash. No, it doesn't crash, right? As you can see, I expected boolean but I got a string anyway. If I put a number, okay? And it would still work, okay? So it just used up for validation purposes. So let's just say we're gonna put it back string here, okay? And then once you define it inside the props, define props function, you can use it right away in the template, okay? So MSG goes right here, right? If I change that to like MSG one, it's gonna crash on the right side, right? It's not gonna say, it's not gonna find it. So that's that. If you wanna use it inside the script tag over here like this, right? So you can't do this, right? Let's say I wanna put left, I don't know, let's just say text equals MSG like that, right? How do you get this MSG out so that you can use it in the script here? So you notice you can see it crashed already. If I go and press the F12 to see the messages, the console, let's do it again, you'll see that MSG is not defined, okay? This image refers to line seven, that's this guy right here but it's okay in the template. So if you wanna use it in the source, you have to define a property to this variable, this function, this function will return the data back but if you don't use it in your space in the class code here, source space, then you don't have to return anything here because you just go directly to the template. If you don't wanna use it inside here, then you have to set this to something like props, okay? There's another variable, I call it props, you can call it whatever you want, it doesn't matter. So this props now contains the data inside this curly brace here, right? We turned that and then now you have to get the message via the props object like this, okay? So you can see that if I refresh that and then if I go down here somewhere, maybe right below the H1, let's put a P tag, put here text, you should see text right over here, it says you did it here, right? Same copy as the other one. So that is how you will access the data inside this props, I can just show you if I turn that off, it's gonna crash and it crashed right there, okay? So we pass data from the parent down through child this way. Now what if you want, I mean, you can pass as many as you want, okay? Now what if I wanna pass this data, let's say, how do we do this? I wanna pass some data down to the child, let's do a, let's make it a little bit interesting, okay? So let's go up here. Oh, one more thing because I'm using the composition API. If you want your variable to be reactive, meaning that if things change in the background, if your data happened to be changed, you want that to be reactive, meaning to reflect life on the view, you must register that using the ref function or the reactive function. So I go back again, right, make sure it's working. And so let's say that I'm gonna pass this data, it's some, just some data. Let's see, let's call it const cities equals some cities, like, you know, Kenosha, report here like Boston and Miami, okay? If I just do that, then this is not reactive, meaning if I later, if I change the cities that of zero commercial to different city, you're not gonna see over here, okay? So for now, let's see that I'm gonna pass this array of data down to the child component so I can display it down here, maybe right below this text here or something. So you do the same thing up here, right? You go here and assign a new variable called cities equals. And if I do this, okay, if you do that, so what you're doing here is basically you just assign the string literal of the word cities to a variable called city, which is a property. So this city here is not this city, this city is here is not that city, okay? It's a key, you pass down to the child component. And then to receive that, you have to go down to your child component and add it to the list up here. So put a comma, put here city, remember it has to be the same name, the type is gonna be string, right? Just put your text. And then now I can put it down here. So let's say that right below the h3 down here, we're gonna put a div, and then set a div, we'll put here the, I'll make it a little bit bigger, so we'll put like h2 and I put here cities. Okay? And you're gonna see that the cities, actually the tech city is displayed down here as opposed to an array of cities. And that's because we did not bind the cities to a variable. Okay? To bind that to the cities variable up here, you have to put in front of this attribute the colon like that. Okay? The colon is a shortcut or you can also use the bind. It's the same thing, it's shortcut. So just basically the colon would do. Now what they say is that this city is the same key, but then it's bound to an object or another data that will be used inside the parentheses here, by the quotes here, but this variable, this is a variable now inside the space up here, okay? Is no longer a string literal. You expect to find another variable up here in the code that matches the name. If I happen to put like cities like this it's not going to find that variable. And you're going to get a no value and so forth. So if I save that fresh it, you can see it's not working, right? It doesn't crash. It's just like there's nothing there. Okay? So if I change this back to the cities like that, you can see now right there, only pass the data down to the child component down here as the cities, it's now an object, an array. You print it and there it is all the names of that. Okay? If you just want to get diversity, you put see a zero it should print only the no shaft. Okay? So that's how you pass data as an object or an array. It'll be an object down to the child component. All right. So now let's do something a little bit more interesting. So in the, right here, so I'm saying that this, let's say I have a function up here. I'm going to create a function and this function will be called update as cities. And I'm going to pass him a new city variable. And then what I'm going to do is that I'm going to say the cities of a zero will be changed to the new city. Right? So when I do that, it will change the city of Kenosha to the new city I sent down and then you will pass that down to the list again. So it will show up here again. Refresh, make sure it's working. Okay? So it's working fine. Now this function, I need to also invoke this, you know, somewhere inside the child component. We can do the, you can do here first. So let's say right below here, let's put a button, I'll put update a city, right? We're going to bind this button to a function. So the add symbol click and I'm going to call the update city and I'm going to pass in a new city, maybe we call it, I don't know, Phoenix. Okay. All right. So when I clicked the button, it's going to change the city zero to Phoenix. And if it's correct, it should pass Phoenix down to the child and it will show Phoenix up here in the child component. Okay. So if I click on it as refresh first and right, you notice that it did not reflect the Kenosha down here. How do we know that it is working? Well, you can check it down here when you submit it. I can do something like console log. Let's log it to the console, the city's array, right? So refresh it again. If I go ahead and update, okay, you see that, you know, city of zero has been changed to Phoenix, but it did not change in the child component. Why? Because this is not reactive. To make this reactive, we have to wrap this with a ref function. This ref function, you have to import from the view, import here, the ref, which is the lower case one, only view component, library, and then refresh that now. Once you do that, okay, you cannot just access city's data like this. You have to go through a property called value. So city's dot value and the value probably stores the actual data. So from here, that's how you change its data. You access this in the code only, not inside the template. The template you access the same way as you normally do. So now I'm making this reactive. As you will see, if I refresh now, if I click the update, can I just change to Phoenix? All right. So that's how you make it reactive. And that's also how you pass data from the parent down to the child. So now let's say that I want to pass this function, this button, if I move this button, as a part of the child component down here, maybe I put it right below the same plate, let's put it below down here. So this is part of the child now, is not the global parent because it doesn't exist here. So again, if I turn it off, you see it's gone. So it's for the child. So how do I make it so that when I click the update function, it fail here and it's gonna pass the data or it's gonna call this function in the parent component, call this function and then change the city like that. So a couple of ways how you can update the data in the source or in the root component up here. One is you go through a function, you pass this function down as a property like you did here, same idea. So let's say I'm gonna go over here, pass a property and I'll call it update city equals the function called update city. Okay, so again, stick with lowercase and your key. The actual function is on the right side. So now this update city points to, it's a reference to this function here. I can use it in the child component, okay? So I'm gonna go then down to the child component and then add that to my list up here. So I call it update city. It's gonna be type of function, right? So I know that it's a function. Okay, now with that done, then when I make the call down here, I don't have access to the update city function. This is from the parent, but it's linked to this update city with the lowercase here like this, okay? So when I do that, basically call this function and pass the data to it and then see if this works, okay? So let's refresh that and click update. Okay, so you see it works just like before because this update city is a reference to the function we passed to it right here. So whatever this function does, it will be invoking this function in the parent component. It passed, it needs one argument, one parameter. So we pass in one parameter. So you treat this as the function in the local space here. Okay. Now, so that's one way you pass data up from the parent component. I'm gonna add another one down here. We duplicate this, alt, shift down, and then let's say this time I'm gonna do the same thing, except I'm not gonna pass the data, any references down here. Instead, I'm going to trigger an event so that the parent component can actually receive or listen to this event. And once it's triggered, it will actually fire a function, the same function up in the parent component. Okay, so that means if you do that, you go down here and you can create and you can emit. So using the dollar sign, dollar, emit, it's a function. So instead of function here, it takes one or two things. Okay, the first argument is always gonna be the name of that event. So for example, click is an event, right? Now enter is an event. You know, key up, key down, all those events that are built into the DOM. So here you can actually create your own custom event. You can call it whatever you want. The rule is that your event names must be in all lowercase. Okay, so no uppercase, okay, all lowercase only. And if you use uppercase, you have to put a dash in front of it. So just stick with the lowercase like this. So the first argument is the name of that. It has to be in the string format only. So I'm gonna say, you know, maybe on update. Well, you know, maybe you'll call something different. Just say, I'm gonna call update city, that's the same name, update city. Okay, so now that I'm using two words, as opposed to one, just a little bit different. So again, don't use capitals like that. I mean, if you do that, it will still work better yet. It's not really nice. And so use lowercase, update city. This is an event, okay? And then if I pass data to it like you do here, then that is the second parameter, okay? If you pass a single argument, cause phoenix to it, let's give it a different name, let's call it down. Something easy would be like Fargo, okay? Somewhere way up there in the corners. Okay, so I update the city to Fargo, and then we'll put here update city too, so we can have it. Okay, that's okay. A little bit tight, but that's fine. All right, so this is the event. This is the value, okay, the argument. So when I call this update city, I'm gonna go up to the parent check component. I'm not gonna pass anything down, but what I'm gonna do is gonna listen to an event. So you listen to event using the add symbol, like you do up here, right, the add click and so forth. The name of the event is update city. And that's gonna be equal to when that event is triggered, what happened? I'm gonna call this function called update city, okay? So notice again, I did not pass anything to it because the data coming in is automatically bound to the event argument. It's gonna be assigned to this new city right here. So whatever you call here, it's gonna be assigned to that variable. And so the rest will behave exactly the same. So now, if I go back and clean my whole thing here, let's see if this works, okay? So the Kenosha update to Phoenix, if I click the update city two, it changes to Fargo, right? So notice I did not pass any data down, but I still have to bind that to an event, like a click event or listen event, right? So it's listening to this event. If this event is fired from the child component, it will get triggered and it will call the same function here, pass data to this city up here, okay? What if you wanna be like a little bit creative and instead of saying something like that, what if you wanna create a random number? Let's say, let's add another one here. Let's put here a Chicago. One more just so we have a little more room. Let's put here, oh, I'm not a Lulu. I'm not sure if I spelled it correctly. Okay, maybe it is. So when you update the city, instead of saying that city, we can then, okay? So what do we, a random, maybe not. So let's add another property here. Let's add the state to this, call it state to ref, and then default state will be Wisconsin. Why put these right here? And then, oh, something happened. Okay, and then when I update this function, I call it update city, but you can call it, I should just call update, doesn't matter, I guess. Let's say when I receive another parameter here. So let us notice, don't call it state like this, okay? If you do that, because if I try to update the state, you know, state that value equals state. And you basically go in circle here, because this state is the local state here, it's not the global state, because now, you know, you can't do this, right? I mean, let's say you can't. If you do that, it's not gonna work, because it's not in global space. So give it a different name, like new state or something. Assign that to the new state. Here you go, so we have two properties, and then now the function accepts two properties in the child component. So when we pass the data down, we have to pass it down to the child as well. Let's go update this right here for now. Let's put here state is equal to state, okay, so we got that. And then down in the child component, we're gonna receive it up here as well, state as a string. And then let's put right in front of, let's move this thing here, go like that one. Let's put it right below here, right in front of this city, we'll call it state. I put a little dash here like that. And what's that red light thing telling me something? Oh, it's kind of ugly, I'm sorry, I just put a BR here. Normally you would use style with a CSS, but just for this demo purposes. Okay, so we have the city and the state. So when I pass to the function up here, I need two arguments, right? One is the city, one is the AZ for state, and then the far goal here would be the code, okay? So if this works, then if I click on Wisconsin, it changes both of those and so forth. Okay, so you can see how it can pass data this way. Of course, you can do this in different ways. This is fine, how it is, you can pass this as an array, this whole thing could be an array instead of the way I have it here, because what are these list growth and stringing growth, right? How do you do that? And population and so forth. If you do that, then using an orator object, but if it's just two arguments, this will grow. So instead of having this approach, you can also do this, you click arguments, and then you can condense it using the rest operator, right? Build that into an array. And so here I would say arguments of zero is the city and the arguments of two is the state, and then three and a fourth and so on, okay? So you can see it's just a work just like before, okay? So now you'd have one argument, right? The rest operator is really useful in this case. All right, so you can see how we pass data down to the child components via properties. It can also pass function down as properties, and we also create custom events in the child component and we trigger that inside the tag here via an event listener directly on the tag. This is an inline event registration, and we bind that here in the child, the tag, okay? So this one here, you have to pass it down. This you pass up basically. So I hope this is helpful. Now, the next I wanna show you is, how do you convert this? What does it look like when you use a options API? This is decomposition, okay? So both they can work in a change of blade, meaning this component can be options. This could be a composition and so forth. It doesn't really matter. We just don't wanna combine together. It's really confusing. So let's say I wanted to convert this to a options API, okay? So here is what you do, which is easier. Probably this one, so it has function, things like that. So that's good. I'll put some space in here so you can see. So the things down here will be the same. We're not gonna touch this. It just, the code up here is different, okay? So the input will stay the same and this set up will be removed. So as long as you do that, the whole thing crash on the right side, that's okay. And this whole thing has to be inside the object, okay? So what you do is you create a, you export this as a default object like this, okay? This is the root component, right? So we'll not receive any data. So the thing that you have, I mean, any props, right? You have the data. We have two data fields. This is a data fields you have. So you put here the data. It's a function, by the way. It has to be a function, otherwise it won't work. You can use the function this way or you can use the function expression like this. That's fine too. I mean, not like that. Okay, that's okay too. It just cannot be error function. Error function doesn't work in this case because it does not bind to this thing, okay? So we return that data. So these two data will be inside here. So let's move this inside here. We'll convert these because it doesn't let you use those cons anymore. We have a object using colon. We don't have the reference. You don't need that anymore. And then see if you can see how this actually works. It's an object now, right? So you get a data set. This is a function. So this function here actually goes inside here as well under inside the methods property. You put it right inside here, okay? And let me clean up this a little bit. So the function update. So you can't use that here. It has to be update and then, okay. So because we're using this approach, when you access this data, we don't have to value anymore. Just the regular data like this. And then you also have to use the keyword this to reference those. All these fields here must reference with this keyword. Otherwise, it's not reachable. So this, and then also this it is, so I can see it. And let's see what else. Let's see object data here. Okay, so almost done. Notice I mentioned before that we import the hello world component or this one too. If you use them, you have to register them. If you don't register them, this is not gonna work when I use it here. So if I press the F tool key, it's gonna tell you something, okay? So it says, so you can see it doesn't show up, right? It doesn't register this. It doesn't know what this is. Even though you add this in crash, it's just not gonna render it. So you have to register that through a property called components, plural. And you against object, right? At this object here, that's why it's called options. And then let's put it up here, it's nicer. And then I will register the hello world component and the welcome just in case we're gonna use that as well. Okay, so as soon as I register that you see, everything comes back to life again. Okay, so now everything should work as normal. Go back and do them as before, okay? So this is the options API approach and this is the composition approach. Just a little bit different how you set up there. But the code in the body here is still the same, okay? So take your pick, right? Whichever you like it to use it, go with that. Okay, so I hope this is helpful. In the next video, we're gonna do something similar except we'll use the CDN version. Thank you and have any questions, please let me know. Bye now.