Javascript 适用于多个孩子的Vue.js道具

我有一个从后端获取数据的父组件和多个只在父组件内部绘制日记并需要后端数据的子组件。找不到答案-如何从父级为多个子组件提供道具？有什么例子吗？Probles是唯一第一个组件接收新数据，其他组件只接收来自父级的数据

data（）return

，但不从后端刷新

这是家长：

<template>

---

我认为不需要孩子的例子，因为他们获取数据，问题是发送的数据id错误。

据我所知，你的解决方案可能是

如果要将组件名称数组添加到

数据

，（在导入所有组件并在

组件

属性中注册后），例如

然后在模板中使用循环遍历该数组 （为了确保在获取所需数据之前不会渲染该文件）：

---

要解决此问题，需要使用全局总线或Vuex，因为孩子的生命周期独立于父母的生命周期。我以Andrejs Abrickis为例，由global bus及其作品制作：

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

---

您发布的代码似乎缺少某些部分。请您仔细检查一下好吗？更正：如果您正在使用Vuex，请不要使用道具…您可以发布一段代码片段吗？谢谢大家！我的错误是我没有使用全局总线或Vuex，问题是父组件的生命周期独立于子组件的生命周期。感谢fr的帮助，但这不起作用。首先，VUE要求：key，我给他：key=“comp”，childs组件内部仍然没有数据，并且递归地重新绘制。

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

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
}

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

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