邢台网公众号_成品在线网站免费入口_江苏网络推广公司_大数据网站

使用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();}}
  };
  

  • 当父组件调用refreshPieData方法更新数据时，子组件通过watch监听pieData的变化来更新echarts饼图。