Vue JS Tutorial - Props, Events, Sync Modifier [ Component Communication - Part 1 ] (2018)

Learn about passing data between VueJS Components.

Let's look at transmitting data between parent and child components using Props, Custom Events and the .sync Modifier (links below).

In following videos, we'll send data between sibling components, and then finally unrelated components.

Fork the codepen to follow along:

## Important Links

[stanissamisco]

That's a really well-made video. Gz mate

[andys]

Man, thanks for the video! I hope you realize that anything you type in the left bottom corner people cannot see because it is hidden behind the black banner.

[SyedHaroon]

Very helpful video, Also, like to add some suggestion, at 17:50 add key to <child-comp key=''someRandVal'> then you don't need watcher, if you like to use watcher then use `immediate: true` in your watcher so that you don't have to initialise in it on "mounted" eg:
watch: {
test: {
immediate: true,
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
},
},

[Capjuancode]

You can’t believe all the help your video did for me thanks man will like and subscribe.

[santiagollanojimenez]

nice but please remove the title in the bottom :)

[TheMalni]

Thank you so much for this video and the clear explanation! Finally I understand how props work and I can use them in my Vue app :D

[elinoralp]

My cat tried to "hit your face" while I was watching your video XD She made it hard for me to finish watching but I did and I have to say that this video was exactly what I was looking for.


I do have a question. In the current documentation, they talk about setting an object to set multiple props (<text-document What I don't understand here is that on the left side of the "=" there no prop name that "doc" binds to. How do I use this?

[lassestube]

You can do it with 2 watchers instead of a method and mounted.

[SyedHaroon]

I prefer: = $event' " instead of and use "update:selectedUserRating", but nice to know `.sync` and `update:...` exist :)

[MakhizaMaluleke]

i cannot see your watcher, the video footer is hiding it.

[lassestube]

selectedRating(newVal) {
console.log("selected rating ", newVal);
this.userRating = newVal;
},
userRating(newVal) {
console.log(newVal);
this.$emit("update:rating", newVal);
}