[Vuejs]-How to pass props to child component with Vue Router?

by

1👍

✅

You should create a bus instance in a separate file that you can import into any other file that needs to use it, instance will persist across all places it is imported.

You can use the data() object instead of passing as props as it will act as a global store but that’s what Vuex is for.

// BusDepot.js

import Vue from 'vue'

export const DashboardBus = new Vue({
  data: {
   mySharedValue: 'Its global!'
  }
})

import { DashboardBus } from 'BusDepot'

export default class Dashboard extends Vue {

  created () {

    DashboardBus.$on('save', () => {

      console.log(DashboardBus.mySharedValue)

    });

  }

}

import { DashboardBus } from 'BusDepot'

export default class Child extends Vue {

   save() {
      DashboardBus.$emit('save');
   }  
}

If you use Vuex as a central data store to resolve your props pass down issue, you could use the main Vue instance as an Event Bus:

import { DashboardBus } from 'BusDepot'

export default class Dashboard extends Vue {

  created () {
    const vm = this

    vm.$root.$on('dashbaord.save', () => {

      console.log(vm.$store.state.mySharedValue)

    });

  }

}

import { DashboardBus } from 'BusDepot'

export default class Child extends Vue {

   save() {
      this.$root.$emit('dashbaord.save');
   }  
}
👤Marc

Leave a comment