Vue.js реквизит для нескольких детей

Question

У меня есть родительский компонент, который извлекает данные из Back End, и компонент с несколькими дочерними элементами, который рисует только диаманты внутри родительского элемента и нуждается в данных Back End.Не можете найти ответ - как дать реквизит для нескольких дочерних компонентов из родительского?Есть ли пример?Probles - ТОЛЬКО первый компонент получает свежие данные, другие - только данные от родителя data() return, но не обновляются от Back End.

Это родительский элемент:

<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

Пример ребенка, я думаю, не нужен, потому что они получают данные, проблема, из-за которой неверно передан идентификатор данных.

Answer 1

Для решения этой проблемы нужно использовать глобальную шину или Vuex, поскольку жизненный цикл детей не зависит от жизненного цикла родителей.Я сделал на глобальном автобусе, и это работает, на примере Андрейса Абрикиса:

// 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) {
      ...
    });
  }
});

Answer 2

насколько я понимаю, решение для вас может быть динамический компонент.

, если вы добавите массив имен компонентов к вашему data, (после того, как вы импортировали все из нихи зарегистрировал их в свойстве components), например

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
}

, затем в своем шаблоне вы перебираете этот массив, используя v-for и v-if (чтобы убедиться, что он не будет обработан до того, как вы получите нужные данные):

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