当前位置：首页 > article >正文

vue中用父组件刷新子组件中echarts饼图中的数据

article 2024/10/11 6:39:49

使用props和watch属性（推荐方法）

步骤一：在父组件中传递数据给子组件

首先在父组件的数据部分定义要传递给子组件的数据，例如一个名为pieData的数据。

data() {
  return {
    pieData: [
      {name: '类别1', value: 30},
      {name: '类别2', value: 50},
      {name: '类别3', value: 20}
    ]
  };
}

然后在父组件的模板中，将数据通过自定义属性（props）传递给子组件。假设子组件标签名为PieChartComponent。

<template>
  <div>
    <PieChartComponent :pieData="pieData"/>
  </div>
</template>
<script>
import PieChartComponent from './PieChartComponent.vue';
export default {
  components: {
    PieChartComponent
  },
  data() {
    // 上面定义的数据
  }
};
</script>

步骤二：在子组件中接收数据并监听数据变化

在子组件中，通过props接收父组件传递的数据。

export default {
  props: {
    pieData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.updateChart();
    },
    updateChart() {
      let option = {
        series: [
          {
            type: 'pie',
            data: this.pieData
          }
        ]
      };
      this.chart.setOption(option);
    }
  },
  watch: {
    pieData(newData, oldData) {
      this.updateChart();
    }
  }
};

在mounted生命周期钩子中，调用initChart方法初始化echarts饼图。initChart方法中先初始化echarts实例（echarts.init(this.$el)），然后调用updateChart方法来设置饼图的初始选项。
定义watch属性来监听pieData的变化。当父组件传递的pieData数据发生变化时，watch中的回调函数会被触发，然后调用updateChart方法来更新饼图的数据。

使用ref属性和事件总线（Event Bus）（适用于复杂场景）

步骤一：创建事件总线
- 在一个单独的JavaScript文件（例如event - bus.js）中创建事件总线。
```
import Vue from 'vue';
export const eventBus = new Vue();
```

步骤二：在父组件中触发事件并使用ref引用子组件

在父组件中，通过import引入事件总线。当需要刷新子组件数据时，触发一个自定义事件。

<template>
  <div>
    <button @click="refreshPieData">刷新饼图数据</button>
    <PieChartComponent ref="pieChart"/>
  </div>
</template>
<script>
import PieChartComponent from './PieChartComponent.vue';
import {eventBus} from './event - bus.js';
export default {
  components: {
    PieChartComponent
  },
  data() {
    return {
      newPieData: [
        {name: '新类别1', value: 40},
        {name: '新类别2', value: 40},
        {name: '新类别3', value: 20}
      ]
    };
  },
  methods: {
    refreshPieData() {
      eventBus.$emit('refresh - pie - data', this.newPieData);
    }
  }
};
</script>

步骤三：在子组件中监听事件并更新数据

在子组件中，通过mounted生命周期钩子挂载事件监听器，监听父组件触发的refresh - pie - data事件。

<script>
import echarts from 'echarts';
export default {
  data() {
    return {
      chart: null,
      pieData: [
        {name: '类别1', value: 30},
        {name: '类别2', value: 50},
        {name: '类别3', value: 20}
      ]
    };
  },
  mounted() {
    this.initChart();
    this.$bus = this.$root.$children.find(child => child._uid === 0).$eventBus;
    this.$bus.$on('refresh - pie - data', (newData) => {
      this.pieData = newData;
      this.updateChart();
    });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.updateChart();
    },
    updateChart() {
      let option = {
        series: [
          {
            type: 'pie',
            data: this.pieData
          }
        ]
      };
      this.chart.setOption(option);
    }
  }
};
</script>

在mounted钩子中，先初始化echarts饼图（initChart方法），然后获取事件总线并监听refresh - pie - data事件。当接收到事件后，更新pieData数据并调用updateChart方法来更新饼图。

使用provide和inject（高级用法）

步骤一：在父组件中提供数据和刷新方法

在父组件中，使用provide选项来提供一个函数，用于刷新子组件的数据。

export default {
  data() {
    return {
      pieData: [
        {name: '类别1', value: 30},
        {name: '类别2', value: 50},
        {name: '类别3', value: 20}
      ]
    };
  },
  provide() {
    return {
      refreshPieData: this.refreshPieData,
      pieData: this.pieData
    };
  },
  methods: {
    refreshPieData(newData) {
      this.pieData = newData;
    }
  }
};

步骤二：在子组件中注入数据和刷新方法并使用

在子组件中，使用inject选项来获取父组件提供的刷新方法和数据。

export default {
  inject: ['refreshPieData', 'pieData'],
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.updateChart();
    },
    updateChart() {
      let option = {
        series: [
          {
            type: 'pie',
            data: this.pieData
          }
        ]
      };
      this.chart.setOption(option);
    }
  },
  watch: {
    pieData(newData, oldData) {
      this.updateChart();
    }
  }
};