Hey gang, in this Vue JS tutorial I’ll show you how we can create direct component to component data transfer using an event bus (which is just a Vue instance which can emit and listen to events).

+ Repo –
+ Atom editor –
+ Download GIT –
+ Vue docs –

You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress, Node.js & more on the channel homepage…


========== PSD to WordPress Playlist ==========

============ Node.js for Beginners Playlist =============

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – or

================== Social Links ==================

Twitter – @TheNetNinja –


  1. Title changed in both header and footer but Showing this error in console. ( Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title" ) Searched google but didn't find any working solution. And thanks for this video

  2. Great series – Thank You 🙂

    Tip for watchers:
    in header.vue line 25, you can pass (as second parameter) this.title. So it's like this:
    this.title = 'Vue Wizzards';
    bus.$emit('titleChanged', this.title)

    this way you need to change title only in one place.

    Console throws error because we didn't delete props.

  3. I'm currently working on a Vue app that I'm building around a framework that another app exports as XML, I'm trying to match the Vue components as close to the xml from the exporter as possible. In one of the situations, there is a specific context component that always shares its context with any of its child nodes until one of the nodes is the same context component type which then shares its context with its children and so on. Now what I'm doing is using 'mixins' to leak a reference to the 'context component' by setting the context component as a provider. This seems to be working fine. My question is, is there any reason against calling methods in the context component directly from children that inject the provided reference to it? like in a child is there some reason doing "this.context.getSomething('asd')" should not be done? I'm basically currently using this to create a 'context.getComponentById' sort of behavior where the 'context' holds a JSON structure containing different { 'id': Vue.Component } pairs. From what I can tell, Vue was intended to be used with a more ridged layout where inter component communication shouldn't happen between dynamic <slot/>'ed components but I'm trying to work around this, is there a better approach?

  4. Hi Ninja! Not sure how often you check these comments…but getting a Vue error in console:

    "[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value."

    Is this something I would worry about in production?

  5. Great series! But I have a quick question about this video. I thought that two of the reasons for using the parent-child prop-event system were (1) to avoid mutating data from within a child component, and (2) to make it easier to reason about the flow of data. I know that the event bus concept is in the Vue documentation, so they must endorse its use, but it seems like it'd make it much harder to reason about the flow of data because child components (and cousins and uncles and grandmothers and brothers) can all talk to each other without alerting the parent. So, I guess my question is this: under what conditions is it a good design decision to use an event bus?

  6. Great videos man!
    Do you know how many tutorials there are left in this playlist and what they are about? I finished it and now I can't wait. I want to get an idea of what's to come before you put the rest online.


Please enter your comment!
Please enter your name here