Question

我有一个从后端获取数据的父级组件和多个子级组件，这些子级组件仅在父级内部绘制diargams，并且需要后端数据。找不到答案-如何为父母的几个孩子提供道具？有什么例子吗？问题仅是第一个组件接收新数据，其他组件仅从父data() return接收数据，而不从后端刷新。

这是父母：

<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

我认为不需要孩子的例子，因为他们得到数据，发送数据ID错误的问题。

Answer 1

据我了解，您的解决方案可能是dynamic component.

如果您要在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>

Answer 2

要解决此问题，需要使用全局总线或Vuex，因为孩子的生命周期独立于父母的生命周期。我是通过全球巴士制造的，并且可以通过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) {
      ...
    });
  }
});

多个孩子的Vue.js道具

2 个答案: