一、问题

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>
Logo

前往低代码交流专区

更多推荐