uniapp不能直接修改props的数据原理浅析

uniapp不能直接修改props的数据

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: "expectDeliveryAt"

避免直接修改prop,因为每当父组件重新渲染时,该值都会被覆盖。相反,请根据data的值使用数据或计算属性。

产生原因:

在 Vue.js 中,一般不推荐在子组件中直接修改 props。这是由于 Vue 的响应式原理决定的。当你将一个对象作为 prop 传递给子组件,并在子组件中修改这个对象的属性,父组件并不能感知到这个修改。这是因为 Vue 只会关注对象属性的 getter 和 setter,当你在子组件中直接修改对象的属性,getter 和 setter 并没有触发,所以 Vue 无法感知到这个修改。

解决方法:

  • v-model 指令或 .sync 修饰符
  • 将修改属性的方法通过 v-bind 传给子组件调用,子组件直接按方法使用即可
  • 将修改属性的方法通过 v-on 传递给子组件调用,使用 $emit() 实现回调修改
  • 或者使用 this.$parent 去修改

实例:

复制代码
props: ['params'],
  watch: {
  'params.approveStatus': function(newVal, oldVal) {
    this.$emit('update:params', { approveStatus: newVal });
  }
}

<child-component :params="params" @update:params="updateParams"></child-component>

methods: {
  updateParams(newParams) {
    this.params = newParams;
  }
}
相关推荐
艾小逗37 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
HhhDreamof_5 小时前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
Simaoya5 小时前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
Dnn015 小时前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js
sen_shan7 小时前
Vue3+Vite+TypeScript+Element Plus开发-23.客制Form组件
vue.js
vvilkim7 小时前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
三原9 小时前
2025 乾坤(qiankun)和 Vue3 最佳实践(提供模版)
vue.js·架构·前端框架
DC...10 小时前
vue滑块组件设计与实现
前端·javascript·vue.js
H5开发新纪元10 小时前
Vite 项目打包分析完整指南:从配置到优化
前端·vue.js