uni-app Avoid mutating a prop directly since

uni-app Avoid mutating a prop directly since

信息类别 详细信息
产品分类 uniapp/小程序/阿里
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10.0.15063
HBuilderX类型 正式
HBuilderX版本号 3.1.12
第三方开发者工具版本号 2.1.9.0
基础库版本号 1
项目创建方式 HBuilderX

操作步骤：

正常打开页面调用组件

预期结果：

无异常

实际结果：

报错 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: “bgAsRight”

bug描述：

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: “bgAsRight”

我看这个问题在19年确认过bug，现在还有，是在支付宝小程序中提示的。
父组件往子组件中传递的值，在子组件中只是拿来展示用了，并没有做修改。
这个还是bug还是什么呀。


更多关于uni-app Avoid mutating a prop directly since的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

基础库版本号没找到在哪，随便写了个

更多关于uni-app Avoid mutating a prop directly since的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有人吗

这是一个在支付宝小程序中出现的警告信息，不是uni-app的bug。

这个警告是Vue.js本身的特性：禁止直接修改props的值。虽然你提到“只是拿来展示用了，并没有做修改”，但实际代码中可能存在以下情况：

  1. 直接赋值操作：在子组件中可能存在类似 this.bgAsRight = newValue 的代码
  2. 双向绑定：在模板中使用了 v-model 绑定到props
  3. 对象/数组的引用修改：如果props是对象或数组，修改其内部属性也会触发此警告

解决方案：

  1. 使用data属性接收：
export default {
  props: ['bgAsRight'],
  data() {
    return {
      localBgAsRight: this.bgAsRight
    }
  }
}
  1. 使用计算属性（如果需要响应式变化）：
export default {
  props: ['bgAsRight'],
  computed: {
    computedBgAsRight() {
      return this.bgAsRight
    }
  }
}
  1. 使用watch监听变化（当父组件更新props时需要同步）：
export default {
  props: ['bgAsRight'],
  data() {
    return {
      localValue: this.bgAsRight
    }
  },
  watch: {
    bgAsRight(newVal) {
      this.localValue = newVal
    }
  }
}
回到顶部