Coding

COMPONENT COMMUNICATION (PROPS / EVENTS) | VueJS | Learning the Basics

  • 00:00:01 welcome to another video about UJ s2 in
  • 00:00:04 this video we're going to learn how we
  • 00:00:07 can have two components communicate with
  • 00:00:09 a jabra like in this example app where
  • 00:00:11 we have a message and then in the
  • 00:00:13 network component that input where I can
  • 00:00:15 enter is something and it will be output
  • 00:00:17 in that same component but what if I
  • 00:00:19 wanted to get it to my message component
  • 00:00:21 or get the message into the input
  • 00:00:23 component in the beginning well let's
  • 00:00:25 take a closer look in this video so we
  • 00:00:29 have this example application which I
  • 00:00:30 set up on the last video in this
  • 00:00:32 playlist if you want to go back there
  • 00:00:33 and see how this was set up so I do have
  • 00:00:36 two components input and message and an
  • 00:00:39 input I have this input field where I
  • 00:00:40 output the message which is pound wire
  • 00:00:42 two-way binding and in the message
  • 00:00:45 component well I just have my message
  • 00:00:47 but here I also do implement the input
  • 00:00:49 component now my first goal is to get
  • 00:00:52 the message I'm using here into the
  • 00:00:55 input component at the beginning and I
  • 00:00:57 can do this by setting up my data
  • 00:01:00 property here using es6 which I can do
  • 00:01:02 in my web pack setup here and here I
  • 00:01:05 will return an object where I store this
  • 00:01:07 message and I will just copy the text
  • 00:01:10 I'm outputting here so just cut it enter
  • 00:01:14 it here and then use string
  • 00:01:16 interpolation up there to output message
  • 00:01:18 now the goal is to get this message into
  • 00:01:21 my input component and we can do this
  • 00:01:24 using the data binding syntax we also
  • 00:01:28 know from native elements so for example
  • 00:01:31 if I had an image I could bind back to
  • 00:01:34 its source
  • 00:01:35 by using : source I can do the same for
  • 00:01:38 my own components I could say I want to
  • 00:01:41 bind to let's say MSG and I want to bind
  • 00:01:45 my message referring to this message
  • 00:01:47 property the problem though is MSG of
  • 00:01:50 course is not known yet it's my own
  • 00:01:52 component how would it know that MSG
  • 00:01:55 means I'm passing you the message well
  • 00:01:58 we have to tell it so let's go to the
  • 00:02:00 input component and do tell it I do this
  • 00:02:03 in my JavaScript object where I
  • 00:02:05 configure this component and here we
  • 00:02:07 have the props property props takes an
  • 00:02:12 array and props Stan
  • 00:02:13 four properties it means which
  • 00:02:15 properties should I be able to set on
  • 00:02:18 this component now I'm setting one
  • 00:02:20 property right now MSG and 40 to
  • 00:02:23 understand this to be able to get this
  • 00:02:26 data I have to add it to this array of
  • 00:02:28 known props so here we add it as a
  • 00:02:30 string msg and of course this text here
  • 00:02:34 has to match the text I'm using here now
  • 00:02:37 with that being added
  • 00:02:38 I can output MSG just like this by
  • 00:02:45 adding a paragraph and then outputting
  • 00:02:47 msg like a normal data property but now
  • 00:02:50 set from outside let's save doesn't take
  • 00:02:53 a look here you see this is a great
  • 00:02:56 message and this is in the input
  • 00:02:57 component the message I'm passing in
  • 00:03:00 next of course it would be great to
  • 00:03:03 let's say see this is a default message
  • 00:03:05 in the input field which we then could
  • 00:03:07 change and then propagate this change to
  • 00:03:10 our parent component where we output
  • 00:03:12 this message in the first place let's
  • 00:03:13 work on this so here we output it in the
  • 00:03:19 paragraph right now but now I want you
  • 00:03:20 out put it here now queue way binding
  • 00:03:24 wouldn't work in the way we expected to
  • 00:03:27 work if a bind to message here you see
  • 00:03:30 this is a great message but if I change
  • 00:03:33 it this is not reflected and also if we
  • 00:03:36 open up the console we see an error
  • 00:03:38 because we're trying to mutate to change
  • 00:03:40 a property which is set from outside and
  • 00:03:44 your chest doesn't like this for obvious
  • 00:03:45 reasons because what happens if we do
  • 00:03:48 that well it gets overwritten from
  • 00:03:50 outside anyways so we change it in the
  • 00:03:52 input component but this does not
  • 00:03:55 propagate up instead from the upper
  • 00:03:58 component from the parent component it
  • 00:03:59 is constantly overwritten so this is not
  • 00:04:02 how it works where we can't you bind to
  • 00:04:04 it a work yes we can but it's not
  • 00:04:07 behaving in a way we expect it to behave
  • 00:04:09 well we can use a number route here we
  • 00:04:14 could say we want to set a value of
  • 00:04:17 message so I'm removing two-way binding
  • 00:04:21 for the time being value and of course
  • 00:04:23 make this bundle or bind with a colon
  • 00:04:27 the beginning which of course just a
  • 00:04:28 shortcut for a V bind so if we save this
  • 00:04:31 we see this is a great message of course
  • 00:04:33 still no two-way binding but now we can
  • 00:04:36 listen with we on or just at to the
  • 00:04:40 input event which is fired whenever we
  • 00:04:42 type something whenever we change
  • 00:04:43 something there and here we could simply
  • 00:04:46 update or because a simply fire some
  • 00:04:50 method so let me add methods property
  • 00:04:55 and here I could simply say change
  • 00:04:58 message choose any name you want your
  • 00:05:00 six syntax here for the shorter version
  • 00:05:03 of this alternative so change message
  • 00:05:06 and here we of course get this default
  • 00:05:09 event object passed into you so here I'm
  • 00:05:11 calling change message and passing the
  • 00:05:13 reference and view test will
  • 00:05:15 automatically give me this event object
  • 00:05:17 and here I know that event the event
  • 00:05:22 object has the well target of the event
  • 00:05:26 which is the input and then the value
  • 00:05:27 therefore here I can say this message
  • 00:05:29 referring to my message property here
  • 00:05:31 which output with string interpolation
  • 00:05:33 this message equals a went target value
  • 00:05:38 this is kind of my own two way binding
  • 00:05:41 but the key differences I'm binding to
  • 00:05:42 do different properties the input comes
  • 00:05:46 from outside but from my prop here msg
  • 00:05:49 and the output goes to another property
  • 00:05:52 the message property here so if we save
  • 00:05:55 this and I start changing this we see
  • 00:06:00 that now this is reflected down there
  • 00:06:03 but not really I can type but as soon as
  • 00:06:08 I start typing well it instantly gets
  • 00:06:11 overwritten again and the reason for
  • 00:06:13 this of course is MSG which sets the
  • 00:06:16 value of my input here comes from
  • 00:06:18 outside so it still constantly overrides
  • 00:06:21 this so I'm technically changing my
  • 00:06:24 message property here but then again it
  • 00:06:26 gets immediately overwritten from
  • 00:06:27 outside and this is a DTD behavior we
  • 00:06:30 want to see here it would be bad if this
  • 00:06:32 would get only get passed one time so we
  • 00:06:35 also need to inform our parent component
  • 00:06:38 that this changed and for
  • 00:06:40 it is I can use another function view
  • 00:06:45 chess has built in dollar sign amid
  • 00:06:47 dollar sign always indicates this is a
  • 00:06:50 built-in method and Amit allows me to
  • 00:06:52 emit my own event Amit takes two
  • 00:06:55 arguments the first one is the name of
  • 00:06:57 the event let's name it message changed
  • 00:07:00 this is totally up to you and the second
  • 00:07:03 is a potential value I want to pass with
  • 00:07:05 this or multiple values even here I want
  • 00:07:09 to pass my changed message so this
  • 00:07:12 message now that allows me to inform my
  • 00:07:16 parent component that something changed
  • 00:07:19 here now the goal is to go to the parent
  • 00:07:21 component which is my message do you
  • 00:07:24 form a message component and I not only
  • 00:07:27 have to pass in appropriate here
  • 00:07:29 now I also have to listen to my own
  • 00:07:31 event with Veon or alternatively at and
  • 00:07:35 then message changed because that's the
  • 00:07:38 name I gave my own event here message
  • 00:07:41 changed so if that I can listen to my
  • 00:07:44 own event thrown by my own component and
  • 00:07:47 I know I get some data passed here the
  • 00:07:50 data in passing is the changed message
  • 00:07:52 and therefore here I can simply set this
  • 00:07:56 message not this just message this
  • 00:07:59 message here in the data property equal
  • 00:08:02 to dollar sign event because I know
  • 00:08:04 again dollars an event st reserved word
  • 00:08:07 for the data in passing with my event
  • 00:08:09 here and i know this will be a string
  • 00:08:12 which is exactly type i expect here
  • 00:08:15 it is a string because again this is
  • 00:08:17 what i'm passing here this message which
  • 00:08:19 holds a string in the end now with this
  • 00:08:22 in place if i save this and we start
  • 00:08:25 changing this again you now see it's
  • 00:08:27 reflected in the parent component i am
  • 00:08:31 able to update this now because now i'm
  • 00:08:34 passing data in with props and i'm
  • 00:08:37 passing data out you could say i'm
  • 00:08:39 propagating any changes with my own
  • 00:08:41 custom event with the emit function that
  • 00:08:44 being said there are other ways of
  • 00:08:46 sharing data across sibling components
  • 00:08:49 for example by using like
  • 00:08:51 airView instance which emits and then
  • 00:08:53 you could subscribe in an avro component
  • 00:08:55 you also have the concept of slots where
  • 00:08:58 you can pass in some data into a
  • 00:09:02 component and it will link these
  • 00:09:05 concepts in the video description you
  • 00:09:07 can also find a fully-fledged
  • 00:09:09 explanation in my more than 16 hours
  • 00:09:11 course on udemy for this video here i
  • 00:09:15 focused on the core idea behind
  • 00:09:19 component communication which is about
  • 00:09:22 props and custom events a very very
  • 00:09:25 basic and key concept to understand when
  • 00:09:28 working with components and view js2 I
  • 00:09:31 hope you liked it see you in our videos
  • 00:09:33 bye