vue2 中父组件数据更新 子组件中的echart 如何刷新

在Vue 2中，如果父组件的数据发生变化，你可以通过以下几种方法来刷新子组件中的echart：

1. 使用`watch`监听父组件数据的变化，并在回调函数中手动调用子组件中的刷新方法。例如：

// 父组件
watch: {
  parentData: function(newValue, oldValue) {
    // 当父组件数据发生变化时，调用子组件的刷新方法
    this.$refs.childComponent.refreshChart();
  }
}

// 子组件
methods: {
  refreshChart() {
    // 在这里刷新echart
  }
}

2. 使用`$emit`在父组件中触发一个自定义事件，并在子组件中监听该事件，然后在监听函数中刷新echart。例如：

// 父组件
methods: {
  updateData() {
    // 更新父组件数据
    this.parentData = newData;
    // 触发自定义事件
    this.$emit('data-updated');
  }
}

// 子组件
mounted() {
  // 监听父组件触发的自定义事件
  this.$parent.$on('data-updated', this.refreshChart);
},
beforeDestroy() {
  // 解除监听
  this.$parent.$off('data-updated', this.refreshChart);
},
methods: {
  refreshChart() {
    // 在这里刷新echart
  }
}

3. 使用`$refs`来直接调用子组件的方法。例如：

// 父组件
methods: {
  updateData() {
    // 更新父组件数据
    this.parentData = newData;
    // 调用子组件的刷新方法
    this.$refs.childComponent.refreshChart();
  }
}

// 子组件
methods: {
  refreshChart() {
    // 在这里刷新echart
  }
}

以上是几种常见的刷新子组件中echart的方法，具体选择哪种方法取决于你的项目需求和个人偏好。