WEBVTT 00:00.090 --> 00:00.780 Hello everyone. 00:00.900 --> 00:02.390 And welcome back. 00:02.400 --> 00:07.410 In this lesson we're going to learn how to make a child component communicate with its parent using 00:07.470 --> 00:11.280 Emmett giving them the ability to call methods and best values. 00:11.280 --> 00:13.010 Let's get started. 00:13.290 --> 00:13.590 Okay. 00:13.620 --> 00:18.220 So in writing these words to your code and as you can see you have created a new folder out to use a 00:18.220 --> 00:20.310 meat specific for this lesson. 00:20.340 --> 00:27.030 However the HDMI code and the javascript code that you're going to use in this lesson is the same as 00:27.030 --> 00:28.860 we've used in the previous lesson. 00:28.860 --> 00:34.710 Basically we're going to continue our discussion about components by creating a new one a common police 00:34.710 --> 00:35.480 component. 00:35.610 --> 00:38.000 And these new components that we're going to create. 00:38.010 --> 00:42.580 We're also going to have a form that will allow us to add new comments to our array. 00:42.690 --> 00:47.340 And I believe this is a perfect opportunity for us to start talking about the need to learn what it 00:47.340 --> 00:48.600 is and how to use it. 00:48.600 --> 00:54.090 And that's because first of all we're going to have to pass the new comment from a child component to 00:54.090 --> 00:54.690 its parent. 00:54.780 --> 01:00.720 And also because as we've seen in Lesson Number Nine forums and user input to actually add the comment 01:00.990 --> 01:02.880 we're going to have to use a method as well. 01:02.880 --> 01:03.590 Right. 01:03.630 --> 01:08.220 Let's start off by adding a bit more of HDMI cord just to make our template look better. 01:08.220 --> 01:09.970 So really fast for example. 01:09.990 --> 01:18.210 Yeah I can add a plus margin model too so that I can remove the H.R. like so and any I can add another 01:18.210 --> 01:21.590 div class card. 01:21.630 --> 01:30.160 Considering that we're using Bootstrap and I can I need to close it like so and yet I can add another 01:30.160 --> 01:41.900 div so we've cut it and there that I need to close right away like so and yet I can add a paragraph 01:42.050 --> 01:54.260 so or rather I can just move this one this way like so and yet I can also add something like published 01:56.190 --> 02:00.900 by get out fix these small error. 02:01.010 --> 02:02.670 Yeah and let's see how it looks like. 02:02.670 --> 02:09.540 So going back to Chrome I've already opened the template so refresh it as you can see in fact it looks 02:09.990 --> 02:10.960 much better now. 02:11.070 --> 02:18.330 We can maybe add some margin on the sides of a container perhaps later on but let's not focus on creating 02:18.390 --> 02:19.990 the new component instead. 02:20.160 --> 02:29.970 So to differentiate the two I'm going to call this one single comment so single comment component and 02:29.970 --> 02:35.280 then we can create comment at least component. 02:35.280 --> 02:42.160 So view dot component and name course comment list. 02:43.560 --> 02:49.580 And considering that the single comment component requires a comment as prob which is an object our 02:49.590 --> 02:56.040 comments list component is going to require an array as Prop 8 comments array so that it can then pass 02:56.070 --> 03:03.210 the single objects to a single comment so I can just copy these props definition like so and is going 03:03.210 --> 03:04.440 to be comments. 03:04.590 --> 03:11.280 It's going to be an array as we've already said one of the cool things about our this component is that 03:11.340 --> 03:16.620 it allows us to add new comments to the least and we're going to do so using a forum. 03:16.770 --> 03:23.490 And because of that we now need to define data inside of it so that inside of that we can define some 03:23.490 --> 03:29.040 really useful properties such as for example new comment inside of a component. 03:29.040 --> 03:33.270 Data is very different from the one that you've used so far. 03:33.270 --> 03:41.070 Instead of a component data is a function it's a function and it's going to return all the data that 03:41.070 --> 03:41.820 we need. 03:41.820 --> 03:46.740 You can now easily see the difference from the data defined instead of a component and a data defined 03:47.220 --> 03:48.560 inside that view instance. 03:48.750 --> 03:51.180 And if you think about it it's actually really obvious. 03:51.180 --> 03:56.790 The reason why we need to use a function inside our components using a function each and every component 03:56.790 --> 04:02.880 is thus it's going to have its own data and it is way of course we can use the same component as many 04:02.880 --> 04:04.700 times as we want or need. 04:04.710 --> 04:08.110 So yeah we can define new comment. 04:08.150 --> 04:18.180 We can initialize it as normal then comment author normal and then also an error field then we're going 04:18.180 --> 04:24.390 to need a template of course the HDMI code for our component template and I'm going to use a back backtrack 04:24.480 --> 04:26.120 once again really useful. 04:26.490 --> 04:33.990 So yeah we can define first of all a div as always we need a root element leave class a bit of margin 04:34.230 --> 04:35.480 and t to. 04:35.520 --> 04:39.650 And of course we need to close the deal like so. 04:40.020 --> 04:47.310 And considering that this is a comment list that we can pass this code right away so we're going to 04:47.310 --> 04:56.430 use the comment component which in fact we've called single comment component. 04:56.430 --> 05:02.600 And considering that yeah we need to pass as prop a comment a single comment we need of course the comments 05:02.600 --> 05:07.440 array which we now need to pass as a prop from the view instance itself. 05:07.440 --> 05:22.110 So here I can just use comments Lister like so and yeah I can parse comments as comments and maybe even 05:22.250 --> 05:23.930 in fact like so. 05:24.300 --> 05:31.440 So let's now see what and let's go back to Chrome so I'm going to screen refresh. 05:31.440 --> 05:36.600 We still have all our comments but of course the difference under the hood is actually huge. 05:36.630 --> 05:39.500 So let's inspect the app with view of tools. 05:39.510 --> 05:42.000 So we have our roots is this of course. 05:42.000 --> 05:48.210 Then you see now we add a comment list component which receives an array of comments as prob and which 05:48.210 --> 05:52.410 has defined three fields in detail and expanding the component. 05:52.410 --> 05:58.390 We see that we've got four single components each of them receives as a prop a comment object. 05:58.440 --> 06:04.290 Let's see if we can add the form to our core mentalist component so that it can then send back to the 06:04.290 --> 06:06.860 routine instance the new command created. 06:06.900 --> 06:12.780 So instead of a template of the comment list component first of all I'm going to add an H.R. tag just 06:12.780 --> 06:17.640 to separate things a little bit and through that we're also going to handle errors. 06:17.640 --> 06:26.640 I'm going to add an edge free and instead of this I'm going to define error of course like so and let's 06:26.640 --> 06:34.500 add the whitespace there as well to make the code more readable and so yeah I can define form I'm going 06:34.500 --> 06:44.940 to close right away and we're going to need to deal with class form group one to close it right away 06:44.940 --> 06:46.810 and we're going to need to. 06:46.830 --> 07:01.700 So 1 and 2 and then of course at bottom of type sub meta like so button and yeah we can add publish 07:01.710 --> 07:02.820 like so. 07:02.820 --> 07:06.500 So let's define the input fields input. 07:06.500 --> 07:17.010 We have class 4 control and you are making add an idea comment author type of course is going to be 07:17.060 --> 07:17.590 text. 07:18.270 --> 07:24.220 And most important of all the model going to add of course comments offer. 07:25.110 --> 07:41.030 So let's close here and let's add a label so label for of course comment author your user name label 07:41.510 --> 07:43.400 lets nobody find a second form group. 07:43.430 --> 07:56.880 And this time we can use a text area so text editor with class for control ideas comment text and the 07:56.880 --> 07:57.300 rose. 07:57.310 --> 08:03.430 We can add maybe three rows and calls you can add 40. 08:03.830 --> 08:11.460 And of course remodel is going to be your comment like so. 08:11.810 --> 08:14.100 So we can't close the text area. 08:17.630 --> 08:19.040 And we can add a label as well. 08:19.100 --> 08:21.350 So too. 08:21.620 --> 08:29.170 We are like so this is going to be a label for common text and yet we can just add something like add 08:29.700 --> 08:30.960 a comment. 08:31.080 --> 08:34.570 We can then in fact add a class also for our button. 08:34.660 --> 08:46.280 So yeah I'm going to define plus equals Button Button small button primary and space like these lets 08:46.290 --> 08:58.380 us find a container so def glass container like so I'm going to indent everything so I wouldn't want 08:59.200 --> 09:01.100 those in tech this way. 09:01.100 --> 09:03.410 Let's now switch to Chrome and let's see what it looks like. 09:03.410 --> 09:07.210 So refresh and we see if there is multiple year. 09:07.330 --> 09:12.290 So going back to view and the entries are in container like so. 09:12.350 --> 09:19.930 So going back one time refresh and yes we can see that the design of a component is fine. 09:20.300 --> 09:23.660 Let's not focus on building the logic to make everything work. 09:23.930 --> 09:28.610 So basically we are going to wait for our forum to be submitted and submitting the form we'll three 09:28.610 --> 09:33.860 get a matter that we're going to define in the comment list component and instead of this method we're 09:33.860 --> 09:39.140 going to use the meat to basically meet a signal that will allow us to trigger a method that we're going 09:39.140 --> 09:44.750 to define inside the view is this and that method is going to add the new comment to the comments array 09:45.020 --> 09:50.210 and because of views the reactivity we're going to see the new comment added right away. 09:50.210 --> 09:53.820 Don't worry if anything I said sounds complicated or confusing. 09:53.840 --> 09:58.580 I guarantee you that by the end of the lesson everything is going to be clear and let's start off by 09:59.000 --> 10:00.480 creating this new method. 10:00.480 --> 10:00.800 The. 10:00.800 --> 10:10.400 So my thoughts and yeah I can you fine add new comments that accepts a parameter new comment that you 10:10.400 --> 10:12.130 are then going to pass it. 10:12.220 --> 10:20.380 Yeah we can do this not comments not push it no comment. 10:20.400 --> 10:25.620 So the challenge really is to call these are the new comment from within are comments least method. 10:25.650 --> 10:29.070 So let's define a new method methods. 10:29.070 --> 10:38.770 We can just call it self meets comments and of course submit comment is going to be called on submit. 10:39.560 --> 10:45.310 You also need to add that prevent like so I'm going to call somebody to comment. 10:45.330 --> 10:51.290 So from weaving these submit comments method we want to emit a signal that will allow us to three get 10:51.890 --> 10:57.050 the add new comment method and we have the signal we also want to pass a new comment so that it can 10:57.050 --> 11:01.760 be added to the comments array and as soon as the commentary changes. 11:01.760 --> 11:07.430 Considering that we're passing the comments rate as a prop to the comment list component as a result 11:07.590 --> 11:10.530 it is going to show us a new single commenting instance. 11:10.550 --> 11:13.620 We will the details of the new comment so tweet me to the signal. 11:13.640 --> 11:20.600 We can do like so these dot dollar sign a meter and first of all we need to define a name for this signal. 11:20.600 --> 11:26.510 In this case we can just call the submit comment and then in this case we also need to pass all the 11:26.510 --> 11:27.790 details of the new comment. 11:28.130 --> 11:34.190 So we need the user name because of course user name is one of the fields of the comment object and 11:34.220 --> 11:43.750 so user name and content and your user name is going to be this dot comment author and as well can I 11:44.210 --> 11:45.650 come up. 11:45.650 --> 11:49.800 Of course content which is going to be d not new comment. 11:50.180 --> 11:53.840 So let's recap real quick what is going on in our forum. 11:54.050 --> 12:01.070 As soon as the publish button is pressed the US submit event fires which cause the submit comment method 12:01.280 --> 12:07.490 and the subject comment is going to emit an event which is then going to send all the data that is needed 12:07.490 --> 12:14.120 to create a new comment directly to the other new comment method that we've defined in the view instance. 12:14.130 --> 12:17.200 It's easy to understand that if you had a meeting an event. 12:17.240 --> 12:22.130 Also need to listen for that event to be emitted and doing so is actually pretty easy. 12:22.130 --> 12:24.110 We just need the event name. 12:24.110 --> 12:28.280 We can't go back to the HDMI file and yet we can wait for the event. 12:28.280 --> 12:30.260 We have V on the same way. 12:30.260 --> 12:37.130 We've been waiting for some events so far and at the same way we can all pass the name of a method that 12:37.130 --> 12:37.790 we want to call. 12:37.790 --> 12:42.340 In this case a new comment that by itself is already expecting the new comment. 12:42.440 --> 12:46.920 So going back to the theme of file we just need to pass the method name. 12:47.000 --> 12:49.190 It's finally time to test our system. 12:49.190 --> 12:53.930 Let's go back to Chrome and refresh the page first and let's try to add a new comment. 12:53.960 --> 13:01.690 So test user a new comment publish and edit is awesome. 13:01.710 --> 13:06.450 We can however make our application even better because of course we want to cleared all the fields 13:06.510 --> 13:13.620 automatically and also because if we now just empty the fields myself we see that we can actually publish 13:14.280 --> 13:15.660 empty comments you see. 13:16.140 --> 13:18.120 So let's go back to visual pseudocode. 13:18.180 --> 13:23.020 And of course we are going to change the code inside this submit comment method. 13:23.250 --> 13:28.950 So yeah I can cut this code for now and he said first of all I'm going to check if both fields have 13:28.950 --> 13:29.650 been field. 13:29.790 --> 13:39.450 These dot new comments and these dot comment author in that case I can image the event and I can also 13:39.450 --> 13:49.170 set these dot new comment to know and these dot comment offer to. 13:49.650 --> 13:58.050 Otherwise if even just a field has been left empty I can add an error so this not error equals something 13:58.050 --> 14:08.640 like please fill out both fields and of course we also need to empty the airfield in case they use that 14:08.640 --> 14:10.380 as then filled out both fields. 14:10.650 --> 14:17.450 If these dot error in that case these not error equals no. 14:17.640 --> 14:24.930 And we can actually also add a bit of margin here so class managing bottom maybe 3 like so. 14:24.960 --> 14:32.010 So let's go back to Chrome and let's refresh the page first of all let's try to send an empty form and 14:32.010 --> 14:32.950 let's see what happens. 14:33.180 --> 14:35.790 And as you can see of course we get an error message. 14:35.790 --> 14:45.840 Let's now try to add a new legit comment so random a random comment publish it gets published very well 14:46.040 --> 14:49.860 and we can also now have a look from the perspective of view dev tools. 14:49.860 --> 14:52.480 So view. 14:52.620 --> 14:57.580 So first of all we've got a route which contains an array of comments of course. 14:57.630 --> 15:03.840 So let's add a new one test to another comment publish. 15:04.110 --> 15:07.020 And of course the new object is added immediately. 15:07.020 --> 15:11.360 And let's also have a look from the perspective of the comment least component. 15:11.400 --> 15:15.810 Have a look for example at comment author and new comment. 15:15.840 --> 15:21.680 So right here below third one you see the two way binding inaction. 15:21.720 --> 15:24.630 So third comments. 15:24.810 --> 15:27.400 Publish the comments prop is change. 15:27.590 --> 15:34.110 Therefore a new single comment instance is added and as a result we get a new comment published in the 15:34.110 --> 15:35.160 page. 15:35.190 --> 15:35.440 Okay. 15:35.460 --> 15:38.280 So that was it for this lecture about components and demeaned. 15:38.280 --> 15:39.400 See you in the next lesson. 15:39.420 --> 15:42.990 What we are going to discuss the complex assessment project for this section.