Topics
Published on December 9, 2016 by Mindspace

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)?

Leave a Reply

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

Notify of
avatar

Warrio W
Guest
Warrio W
9 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
9 months 13 days ago

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

A Schopenhauer
Guest
A Schopenhauer
9 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
9 months 23 days ago

You are a great teacher! 🙂

Mindspace
Guest
Mindspace
9 months 23 days ago

Thanks so much!

Eric Tirado
Guest
Eric Tirado
10 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
9 months 20 days ago

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

Mindspace
Guest
Mindspace
10 months 1 day ago

Sorry, what do you want to show up where?

Longinos Ruvalcaba
Guest
Longinos Ruvalcaba
10 months 13 days ago

I got my brains scrambled

llebs
Guest
llebs
10 months 22 days ago

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

Mindspace
Guest
Mindspace
10 months 22 days ago

Great to hear you liked it!

Charles Wang
Guest
Charles Wang
10 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
10 months 23 days ago

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

otherchannel
Guest
otherchannel
10 months 25 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
10 months 25 days ago

Great to hear that, thanks so much !

Manuel Alejandro Serrano Mendoza
Guest
Manuel Alejandro Serrano Mendoza
10 months 26 days ago

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

Mindspace
Guest
Mindspace
10 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
11 months 9 days ago

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

wpDiscuz