[Vue warn]: Avoid mutating a prop directly since the value will be overwritten w
一、问题vue项目中,自定义子组件的时候,在子组件中修改了父组件传递过来的值,报错场景:父组件引入绘制图表的子组件,存在:子组件图表点击下钻重绘的功能,对于此功能我通过echarts中的点击事件重新赋值传过来的数据chartData,然后再通过对chartData的监听重绘图表父组件:<!-- 父组件传入数值对象barData --><div class="echarts">
一、问题
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 的情形:
-
这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的data property 并将这个 prop 用作其初始值:
props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }
-
这个 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>
更多推荐
所有评论(0)