Hello everyone.
And welcome back.
In this lesson we're going to learn how to make a child component communicate with its parent using
Emmett giving them the ability to call methods and best values.
Let's get started.
Okay.
So in writing these words to your code and as you can see you have created a new folder out to use a
meat specific for this lesson.
However the HDMI code and the javascript code that you're going to use in this lesson is the same as
we've used in the previous lesson.
Basically we're going to continue our discussion about components by creating a new one a common police
component.
And these new components that we're going to create.
We're also going to have a form that will allow us to add new comments to our array.
And I believe this is a perfect opportunity for us to start talking about the need to learn what it
is and how to use it.
And that's because first of all we're going to have to pass the new comment from a child component to
its parent.
And also because as we've seen in Lesson Number Nine forums and user input to actually add the comment
we're going to have to use a method as well.
Right.
Let's start off by adding a bit more of HDMI cord just to make our template look better.
So really fast for example.
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
div class card.
Considering that we're using Bootstrap and I can I need to close it like so and yet I can add another
div so we've cut it and there that I need to close right away like so and yet I can add a paragraph
so or rather I can just move this one this way like so and yet I can also add something like published
by get out fix these small error.
Yeah and let's see how it looks like.
So going back to Chrome I've already opened the template so refresh it as you can see in fact it looks
much better now.
We can maybe add some margin on the sides of a container perhaps later on but let's not focus on creating
the new component instead.
So to differentiate the two I'm going to call this one single comment so single comment component and
then we can create comment at least component.
So view dot component and name course comment list.
And considering that the single comment component requires a comment as prob which is an object our
comments list component is going to require an array as Prop 8 comments array so that it can then pass
the single objects to a single comment so I can just copy these props definition like so and is going
to be comments.
It's going to be an array as we've already said one of the cool things about our this component is that
it allows us to add new comments to the least and we're going to do so using a forum.
And because of that we now need to define data inside of it so that inside of that we can define some
really useful properties such as for example new comment inside of a component.
Data is very different from the one that you've used so far.
Instead of a component data is a function it's a function and it's going to return all the data that
we need.
You can now easily see the difference from the data defined instead of a component and a data defined
inside that view instance.
And if you think about it it's actually really obvious.
The reason why we need to use a function inside our components using a function each and every component
is thus it's going to have its own data and it is way of course we can use the same component as many
times as we want or need.
So yeah we can define new comment.
We can initialize it as normal then comment author normal and then also an error field then we're going
to need a template of course the HDMI code for our component template and I'm going to use a back backtrack
once again really useful.
So yeah we can define first of all a div as always we need a root element leave class a bit of margin
and t to.
And of course we need to close the deal like so.
And considering that this is a comment list that we can pass this code right away so we're going to
use the comment component which in fact we've called single comment component.
And considering that yeah we need to pass as prop a comment a single comment we need of course the comments
array which we now need to pass as a prop from the view instance itself.
So here I can just use comments Lister like so and yeah I can parse comments as comments and maybe even
in fact like so.
So let's now see what and let's go back to Chrome so I'm going to screen refresh.
We still have all our comments but of course the difference under the hood is actually huge.
So let's inspect the app with view of tools.
So we have our roots is this of course.
Then you see now we add a comment list component which receives an array of comments as prob and which
has defined three fields in detail and expanding the component.
We see that we've got four single components each of them receives as a prop a comment object.
Let's see if we can add the form to our core mentalist component so that it can then send back to the
routine instance the new command created.
So instead of a template of the comment list component first of all I'm going to add an H.R. tag just
to separate things a little bit and through that we're also going to handle errors.
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
add the whitespace there as well to make the code more readable and so yeah I can define form I'm going
to close right away and we're going to need to deal with class form group one to close it right away
and we're going to need to.
So 1 and 2 and then of course at bottom of type sub meta like so button and yeah we can add publish
like so.
So let's define the input fields input.
We have class 4 control and you are making add an idea comment author type of course is going to be
text.
And most important of all the model going to add of course comments offer.
So let's close here and let's add a label so label for of course comment author your user name label
lets nobody find a second form group.
And this time we can use a text area so text editor with class for control ideas comment text and the
rose.
We can add maybe three rows and calls you can add 40.
And of course remodel is going to be your comment like so.
So we can't close the text area.
And we can add a label as well.
So too.
We are like so this is going to be a label for common text and yet we can just add something like add
a comment.
We can then in fact add a class also for our button.
So yeah I'm going to define plus equals Button Button small button primary and space like these lets
us find a container so def glass container like so I'm going to indent everything so I wouldn't want
those in tech this way.
Let's now switch to Chrome and let's see what it looks like.
So refresh and we see if there is multiple year.
So going back to view and the entries are in container like so.
So going back one time refresh and yes we can see that the design of a component is fine.
Let's not focus on building the logic to make everything work.
So basically we are going to wait for our forum to be submitted and submitting the form we'll three
get a matter that we're going to define in the comment list component and instead of this method we're
going to use the meat to basically meet a signal that will allow us to trigger a method that we're going
to define inside the view is this and that method is going to add the new comment to the comments array
and because of views the reactivity we're going to see the new comment added right away.
Don't worry if anything I said sounds complicated or confusing.
I guarantee you that by the end of the lesson everything is going to be clear and let's start off by
creating this new method.
The.
So my thoughts and yeah I can you fine add new comments that accepts a parameter new comment that you
are then going to pass it.
Yeah we can do this not comments not push it no comment.
So the challenge really is to call these are the new comment from within are comments least method.
So let's define a new method methods.
We can just call it self meets comments and of course submit comment is going to be called on submit.
You also need to add that prevent like so I'm going to call somebody to comment.
So from weaving these submit comments method we want to emit a signal that will allow us to three get
the add new comment method and we have the signal we also want to pass a new comment so that it can
be added to the comments array and as soon as the commentary changes.
Considering that we're passing the comments rate as a prop to the comment list component as a result
it is going to show us a new single commenting instance.
We will the details of the new comment so tweet me to the signal.
We can do like so these dot dollar sign a meter and first of all we need to define a name for this signal.
In this case we can just call the submit comment and then in this case we also need to pass all the
details of the new comment.
So we need the user name because of course user name is one of the fields of the comment object and
so user name and content and your user name is going to be this dot comment author and as well can I
come up.
Of course content which is going to be d not new comment.
So let's recap real quick what is going on in our forum.
As soon as the publish button is pressed the US submit event fires which cause the submit comment method
and the subject comment is going to emit an event which is then going to send all the data that is needed
to create a new comment directly to the other new comment method that we've defined in the view instance.
It's easy to understand that if you had a meeting an event.
Also need to listen for that event to be emitted and doing so is actually pretty easy.
We just need the event name.
We can't go back to the HDMI file and yet we can wait for the event.
We have V on the same way.
We've been waiting for some events so far and at the same way we can all pass the name of a method that
we want to call.
In this case a new comment that by itself is already expecting the new comment.
So going back to the theme of file we just need to pass the method name.
It's finally time to test our system.
Let's go back to Chrome and refresh the page first and let's try to add a new comment.
So test user a new comment publish and edit is awesome.
We can however make our application even better because of course we want to cleared all the fields
automatically and also because if we now just empty the fields myself we see that we can actually publish
empty comments you see.
So let's go back to visual pseudocode.
And of course we are going to change the code inside this submit comment method.
So yeah I can cut this code for now and he said first of all I'm going to check if both fields have
been field.
These dot new comments and these dot comment author in that case I can image the event and I can also
set these dot new comment to know and these dot comment offer to.
Otherwise if even just a field has been left empty I can add an error so this not error equals something
like please fill out both fields and of course we also need to empty the airfield in case they use that
as then filled out both fields.
If these dot error in that case these not error equals no.
And we can actually also add a bit of margin here so class managing bottom maybe 3 like so.
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
let's see what happens.
And as you can see of course we get an error message.
Let's now try to add a new legit comment so random a random comment publish it gets published very well
and we can also now have a look from the perspective of view dev tools.
So view.
So first of all we've got a route which contains an array of comments of course.
So let's add a new one test to another comment publish.
And of course the new object is added immediately.
And let's also have a look from the perspective of the comment least component.
Have a look for example at comment author and new comment.
So right here below third one you see the two way binding inaction.
So third comments.
Publish the comments prop is change.
Therefore a new single comment instance is added and as a result we get a new comment published in the
page.
Okay.
So that was it for this lecture about components and demeaned.
See you in the next lesson.
What we are going to discuss the complex assessment project for this section.