Vue.js props for multiple childs

Question

I have parent component that is fetch data from Back End and multiple childs component that only draw diargams inside parent and need Back End data. Can't find the answer - how to give props for several child component from parent? Is there any example? Probles is ONLY first component receives fresh data, others receives only data from parent data() return but not refreshed from Back End.

This is parent:

<template>

<panel-group
  :ticketsProp="tickets"
  :airportsProp="airports"
  :aircraftsProp="aircrafts"
  :pilotsProp="pilots"></panel-group>

<el-row :gutter="32">
  <el-col :xs="24" :sm="24" :lg="8">
    <div class="chart-wrapper">
      <bar-chart :msg="message"></bar-chart>
    </div>
  </el-col>
  <el-col :xs="24" :sm="24" :lg="8">
    <div class="chart-wrapper">
      <pie-chart :disregardProp="disregard"></pie-chart>
    </div>
  </el-col>
  <el-col :xs="24" :sm="24" :lg="8">
    <div class="chart-wrapper">
      <persent-of-assessed :assessedProp="assessed"></persent-of-assessed>
    </div>
  </el-col>
</el-row>

data() {
    return {
      dataLoading: true,
      dataFromDB: null,
      message: 'This is test',
      tickets: 0,
      aircrafts: 0,
      pilots: 0,
      airports: 0,
      assessed: 0,
      disregard: 0
    }
  }

    created() {
    this.getData()
  },
  methods: {
    getData() {
      this.dataLoading = true
      getDashboardStat().then(response => {
        this.dataFromDB = response.data
        this.listLoading = false
      }).then(() => {
        this.tickets = this.dataFromDB.ticketsAmount
        this.airports = this.dataFromDB.airportsAmount
        this.aircrafts = this.dataFromDB.aircraftAmount
        this.pilots = this.dataFromDB.pilotsAmount
        this.disregard = this.dataFromDB.sumOfDisregard
        this.assessed = this.dataFromDB.percentOfAssessed

Example of child I think not needed, because they get data, problem that sended data id wrong.

Answer 1

as i understand you, the solution for you might be dynamic component.

if youm add an array of components names to your data, (after you imported all of them and registered them in the components property) such as

data() {
    return {
      componentsArr:['panelGroup',
                     'secondComponent',
                     'thirdComponent'],
      dataLoading: true,
      dataFromDB: null,
      message: 'This is test',
      tickets: 0,
      aircrafts: 0,
      pilots: 0,
      airports: 0,
      assessed: 0,
      disregard: 0,

    }
  },
components:{
   exampleComponent,
   panelGroup,
   secondComponent,
   thirdComponent
}

then in your template you loop over that array using v-for, and v-if (to make sure it wont get rendered before you fetch the data you need):

<component v-if=" ! dataLoading" v-for="comp in componentsArr" :is="comp"
  :ticketsProp="tickets"
  :airportsProp="airports"
  :aircraftsProp="aircrafts"
  :pilotsProp="pilots"></component>

Answer 2

To resolve this promblem need to use global bus or Vuex, because life cycle of childrens are independent from parent life cycle. I made by global bus and it's works, by example of Andrejs Abrickis:

// event-bus.js
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

// component-a.js
import Vue from 'vue';
import EventBus from './event-bus';
Vue.component('component-a', {
  ...
  methods: {
    emitMethod () {
       EventBus.$emit('EVENT_NAME', payLoad);
    }
  }
});

// component-b.js
import Vue from 'vue';
import EventBus from './event-bus';
Vue.component(‘component-b’, {
  ...
  mounted () {
    EventBus.$on(‘EVENT_NAME’, function (payLoad) {
      ...
    });
  }
});