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;
  }
}
相关推荐
我是小路路呀8 分钟前
vue开始时间小于结束时间,时间格式:年月日时分
前端·javascript·vue.js
li_Michael_li21 分钟前
Vue 3 模板引用(Template Refs)详解与实战示例
前端·javascript·vue.js
慈云数据3 小时前
从开发到上线:基于 Linux 云服务器的前后端分离项目部署实践(Vue + Node.js)
linux·服务器·vue.js
小小鸭程序员9 小时前
Vue组件化开发深度解析:Element UI与Ant Design Vue对比实践
java·vue.js·spring·ui·elementui
拉不动的猪10 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
陌路物是人非10 小时前
SpringBoot + Netty + Vue + WebSocket实现在线聊天
vue.js·spring boot·websocket·netty
拉不动的猪10 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
ElasticPDF-新国产PDF编辑器10 小时前
Uni-app PDF Annotation plugin library online API examples
pdf·uni-app
揣晓丹13 小时前
JAVA实战开源项目:校园失物招领系统(Vue+SpringBoot) 附源码
java·开发语言·vue.js·spring boot·开源