[Vue warn]: Avoid mutating a prop directly since the value will be overwritten w

一、问题

vue项目中，自定义子组件的时候，在子组件中修改了父组件传递过来的值，报错

场景：父组件引入绘制图表的子组件，存在：子组件图表点击下钻重绘的功能，对于此功能我通过echarts中的点击事件重新赋值传过来的数据chartData，然后再通过对chartData的监听重绘图表

父组件：

<!-- 父组件传入数值对象barData -->
<div class="echarts">
  <BaseEcharts :chartData="barData"/>
</div>

子组件：

<template>
  <div ref="myChart"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["chartData"],
  mounted() {
    this.drawEcharts();
  },
  watch: {
    chartData: {
      handler() {
        this.drawEcharts();
      }
    }
  },
  methods: {
    drawEcharts() {
      // 绘制图表...（里面用的chartData）
    }
  }
</script>

结果：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “chartData”

---

二、探究

📌 官方解释

三、解决

📌 官方：这里有两种常见的试图变更一个 prop 的情形：

1. 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的data property 并将这个 prop 用作其初始值：

   props: ['initialCounter'],
   data: function () {
     return {
       counter: this.initialCounter
     }
   }
   

2. 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

   props: ['size'],
   computed: {
     normalizedSize: function () {
       return this.size.trim().toLowerCase()
     }
   }
   

最终通过官网第一种：子组件data中定义一个值，用来赋值props传递过来的数值 解决了问题

子组件：

<template>
  <div ref="myChart"></div>
</template>

<script>
export default {
  data() {
    return {
        myChartData: this.chartData
    };
  },
  props: ["chartData"],
  mounted() {
    this.drawEcharts();
  },
  watch: {
    myChartData: {
      handler() {
        this.drawEcharts();
      }
    }
  },
  methods: {
    drawEcharts() {
      // 绘制图表...（里面改用myChartData）
    }
  }
</script>