【解决方案】[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the pa

最新推荐文章于 2025-03-21 14:39:26 发布

喵宁一

最新推荐文章于 2025-03-21 14:39:26 发布

阅读量6.2w

点赞数 25

分类专栏：平时遇到的小问题文章标签： vue components

本文链接：https://blog.csdn.net/shine_a/article/details/104337886

版权

平时遇到的小问题专栏收录该内容

29 篇文章

订阅专栏

本文详细解析了Vue中直接修改从父组件传递给子组件的Props数据时出现的警告，阐述了Vue的单向数据流原则，并提供了正确的数据处理方式，包括使用data或computed属性，以及如何通过watch监听父组件变量变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、错误详情

[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: "items_index"

2、错误原因

改动了子组件中引用的父组件的变量，也就是props中的数据

在Vue2中组件props中的数据只能单向流动，即只能从父组件通过组件的DOM属性attribute传递props给子组件，子组件只能被动接收父组件传递过来的数据，并且在子组件中，不能修改由父组件传来的props数据。

3、解决方案

不要直接修改从父组件传过来的props数据，在data函数中重新定义一个变量，将props数据数据赋值在data变量上，后面修改data变量即可。如下：

props:["father"]
data(){
  return{
    father_1 = this.father
  }
}

如果想要监听父组件中传递过来的变量，从而修改子组件中的某个数据，可以使用watch这个监听函数来监听。如下：

props:["father"]
data(){
  return{
    son = ""
  }
}
//监听函数，只要从父组件中传过来的father变量发生变化,
//子组件中定义的son变量就会赋值为“儿子”
watch:{
  father(){
    this.son = "儿子"
  }
}