vue修改子组件属性后子组件不重新渲染的问题

最新推荐文章于 2024-11-08 16:44:11 发布

原创最新推荐文章于 2024-11-08 16:44:11 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue-admin-tempalte

5 篇文章

订阅专栏

本文探讨了在Vue项目中使用ECharts时遇到的子组件数据更新后不重新渲染的问题，并提供了解决方案。通过深入分析，我们了解到使用watch监听属性变化并重新初始化图表可以确保视图的实时更新。

vue修改echart图表子组件属性值后子组件不重新渲染的问题

使用watch监听属性变量

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    ageData:{
        default: [],
        type: Array
    }
  },

 watch:{
    ageData:{
      deep:true,
      handler:function(newVal,oldVal){
        console.log("传入图表的新值",newVal)
        if(newVal){
          this.ageData=newVal
          this.initChart(newVal);
        }
      }
    }
  },