CODEWITHSUNDEEP
vue.jsvue-router
KingOfCoders
KingOfCoders

Reputation: 2282

How to pass props to child component with Vue Router?

I have a Vue component with Navigation and layout that uses a bus to communicate with sub components. The bus is passed as a prop to sub components which then use $emit.

export default class Dashboard extends Vue {

  protected bus: Vue = new Vue();

  mounted() {
    if (this.bus != null) {
      this.bus.$on("save", () => {
        //
      });
    }
  }
}

@Component({ props: ["bus"] })
export default class Child extends Vue {
   protected bus!: Vue;

   save() {
      this.bus.$emit("save");
   }  
}

This works fine in the standard case.

In the case of Vue Router how can I inject the bus component from the parent into the children?

Upvotes: 0

Views: 939

Answers (1)

Marc
Marc

Reputation: 5465

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');
   }  
}

Upvotes: 1

Related Questions