多个孩子的 Vue.js 道具答案

【问题标题】：Vue.js props for multiple childs多个孩子的 Vue.js 道具
【发布时间】：2018-12-21 06:55:09
【问题描述】：

我有从后端获取数据的父组件和多个子组件，它们只在父组件中绘制图表并需要后端数据。找不到答案 - 如何为父级的几个子组件提供道具？有什么例子吗？问题是只有第一个组件接收新数据，其他组件只接收来自父 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 错误的问题。

【问题讨论】：

您发布的代码似乎缺少某些部分。你能再检查一下吗？
更正：如果您使用 Vuex，请不要使用 props...
能发个sn-p代码吗？
谢谢大家！我的错误是我没有使用全局总线或Vuex，问题是父组件生命周期独立于子组件生命周期。

标签： javascript vue.js parent-child vuex

【解决方案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>

【讨论】：

感谢 fr 尝试帮助，但这不起作用。首先 Vues 要求 :key，我给他 :key="comp" 并且子组件仍然没有数据，并且递归地在内部进行 redndering。

【解决方案2】：

要解决这个问题需要使用全局总线或Vuex，因为children的生命周期独立于parent生命周期。我由全球巴士制作，它的作品，以 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) {
      ...
    });
  }
});

【讨论】：