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;
  }
}
相关推荐
iOS阿玮22 分钟前
为什么独立开发者都在AppStore而不去安卓市场?
uni-app·app·apple
wocwin1 小时前
Vue移动端项目二次封装原生table组件,支持表头/数据动态配置(支持多级表头、排序);作用域插槽、render函数渲染某列数据等功能
vue.js
NicolasCage1 小时前
Icon图标库推荐
vue.js·react.js·icon
一道雷1 小时前
🧩 Vue Router嵌套路由新范式:无需嵌套 RouterView 的布局实践
前端·vue.js
Ares-Wang2 小时前
Vue》》@ 用法
前端·javascript·vue.js
张志鹏PHP全栈4 小时前
Vue3第五天,ref 和 reactive的介绍和区别
前端·vue.js
江城开朗的豌豆4 小时前
Vue/React凭什么吊打传统前端?6年老司机带你揭秘它们的性能杀招!
前端·javascript·vue.js
江城开朗的豌豆4 小时前
虚拟DOM:为什么React/Vue比直接操作DOM快10倍?
前端·javascript·vue.js
光影少年4 小时前
vue3.6更细哪些东西
前端·vue.js·掘金·金石计划
练习前端两年半4 小时前
Vue 3 Render函数深度解析:Text、Comment、Fragment节点的渲染机制
前端·vue.js