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

proud12122024-12-30 15:11

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;
  }
}