Topics
Published on December 9, 2016 by Mindspace
Want create site? Find Free WordPress Themes and plugins.

VueJS 2 is an amazing Frontend Framework! With all these Components it’s really time to let them talk to each other. Use Props and Events for that!
It’s a JavaScript Frontend Framework – for more Resources on JavaScript, scroll down.

Want to dive much deeper into it? Have a look at this 16+ hour course: www.udemy.com/vuejs-2-the-complete-guide/?couponCode=YOUTUBE_VUE

Want the Source Code? Go to the following Github Repository and chose the Right Branch: github.com/mschwarzmueller/vuejs2-getting-started

Sharing Data via an Event Bus: vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
Sharing Data via Slots: vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots

Also consider having a look at the Official Docs: vuejs.org/

JavaScript Resources:
Book some Coaching on Savvy now and get a $10 Discount: www.savvy.is/?ref=9fee2b (Discount Code 9fee2b)
Get my full JavaScript course: www.udemy.com/javascript-bootcamp-2016/?couponCode=YOUTUBE_PROMO
Or the ES6 course for the next Level of JavaScript: www.udemy.com/es6-bootcamp-next-generation-javascript/?couponCode=YOUTUBE_PROMOS

Liked the Video? Consider subscribing to the channel and my Newsletter (no spamming!): mschwarzmueller.com/
Liked it a lot? Why don’t you follow me on Facebook (www.facebook.com/mindspacechannel/) or Twitter (@maxedapps)?

Did you find apk for android? You can find new Free Android Games and apps.

Leave a Reply

45 Comments on "COMPONENT COMMUNICATION (PROPS / EVENTS) | VueJS 2 | Learning the Basics"

Notify of
avatar

Warrio W
Guest
Warrio W
5 months 13 days ago

There are also $refs that can help communication between components : vuejs.org/v2/guide/components.html#Child-Component-Refs

Mindspace
Guest
Mindspace
5 months 13 days ago

That's true – thanks for sharing this with everyone!

A Schopenhauer
Guest
A Schopenhauer
5 months 14 days ago
I was having trouble with the last part of this tutorial. I don't know if there was a change to babel, Vue.js, or one of the other packages since this video was published. In order to make it work, I had to make a couple of changes. First, I changed the app-input tag to the following: <app-input :msg="message" @messagechanged="updateMsg"></app-input>Somehow the camel-case name for the event was throwing it off. Of course, I also had to change the emit statement in the changeMessage function for the input component to: this.$emit('messagechanged', this.message);Second, I had to add the 'updateMsg' method to the app-input… Read more »
Titi Ionut Catalin Pocsan
Guest
Titi Ionut Catalin Pocsan
5 months 23 days ago

You are a great teacher! 🙂

Mindspace
Guest
Mindspace
5 months 23 days ago

Thanks so much!

Eric Tirado
Guest
Eric Tirado
6 months 1 day ago

How do I get it to show up in the home page. In the App.vue file?

Eric Tirado
Guest
Eric Tirado
5 months 20 days ago

I had skipped one of your videos. Can you number them?

Mindspace
Guest
Mindspace
6 months 1 day ago

Sorry, what do you want to show up where?

Longinos Ruvalcaba
Guest
Longinos Ruvalcaba
6 months 13 days ago

I got my brains scrambled

llebs
Guest
llebs
6 months 22 days ago

Thank you so much! I spent an hour trying to figure this out another way.

Mindspace
Guest
Mindspace
6 months 22 days ago

Great to hear you liked it!

Charles Wang
Guest
Charles Wang
6 months 23 days ago

Very good tutorial. I am new to vue.js, and this video clip tells me how to use props and events. Many thanks.

Mindspace
Guest
Mindspace
6 months 23 days ago

Happy to hear that this was helpful Charls – thanks for your nice feedback!

otherchannel
Guest
otherchannel
6 months 26 days ago

Max – your vids are great. This topic is not articulated well in the docs and your vid cleared some things up. Really nice.

Mindspace
Guest
Mindspace
6 months 25 days ago

Great to hear that, thanks so much !

Manuel Alejandro Serrano Mendoza
Guest
Manuel Alejandro Serrano Mendoza
6 months 27 days ago

It is easier to add ".sync" to prop.

Mindspace
Guest
Mindspace
6 months 26 days ago

That's not correct for Vue.js 2 (which this video is about). sync is deprecated and shouldn't be used => github.com/vuejs/vue/issues/2873

Andrew Nguyen
Guest
Andrew Nguyen
7 months 9 days ago

Is there a way to access the 'msg' prop from the data() function's definition?

wpDiscuz