解决子组件修改父组件传来的props值报错问题

最新推荐文章于 2023-12-19 14:39:33 发布
最新推荐文章于 2023-12-19 14:39:33 发布
阅读量755 收藏
点赞数 2
分类专栏： vue javascript 文章标签： 前端 js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liaoxianhua888/article/details/123661240
版权

报错提示：

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

解决方法：

将props接收过来的值先在data里存起来，在v-model里绑定data里的变量即可

props:{

typeVal:{

type:String

},

pageUrl:{

type:String

}

},

data(){

return{

//这里重新赋值是为了解决子组件修改父组件传来的props值报错问题

curTypeVal:this.typeVal,

curPageUrl:this.pageUrl,

}

},

Liaochjser
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - 解决子组件中修改props值报错(error Unexpected mutation of “---“ prop vue/no-mutating-props)
王光迪的CSDN
02-24 3万+
error： Unexpected mutation of "、、、" prop vue/no-mutating-props
vue中如何让子组件修改父组件数据
08-27
2. 使用 .sync 来让子组件修改父组件的值 使用 .sync 可以让子组件修改父组件的值，实际上是上面的方法的精简版。 ``` // 在父组件中 // 在子组件中 <h3>{{word}} export default { props: { word:...
子组件中修改props值报错(error Unexpected mutation of “---“ prop vueno-mutating-props)
jadetii的学习地盘
04-21 1784
总结：多个组件需要使用的数据可用全局事件总线（一方修改多方变化，但缺点也很明显：要注意全局变量重复问题，而且需要在订阅事件的组件里手动销毁监听否则会多次执行。），但部分数据只存在于一两个组件间时可以用props传递，但修改时要注意规避单向数据流的问题。父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值。但是反过来则不行，不应该在一个子组件内部改变 prop。1.只是在当前组件使用不传回数据可以利用拷贝（必要时可使用深拷贝）和计算属性得到数据后使用。
vue 子组件直接修改父组件props传来的值报错如何解决？
浮生的博客
08-23 2144
报错信息： 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. 原因：报错原因：props传值是单向数据流，只能由父组件传递给子组件，子组件被动接受，一旦子组件自己试图修改props中的值，就会报上述错误，这样
uniapp 父子组件传值 -- 跳转传递参数 -- 解决传参报错
H524268015wsw的博客
08-07 3520
同时要把子组件的名称标签放在视图中，传值会用到，例如我这里子组件就叫son，所以要在父组件视图中写上标签，子组件的操作即使props接收，再用插值语法 {{}} 显示在视图上。想象一下，父子组件传值，就类似于父亲给儿子东西，父亲给儿子的东西要有名字吧，名字就是属性，父亲给儿子东西，儿子要用手接过来，那手就相当于子组件里的props。子组件：因为传递的是一个对象，所以type的属性值应该是一个Object，默认值default是一个{}，不写default的值也不会有影响。...
Vue3子组件修改父组件的props使用v-model导致报错
akkigg的博客
11-17 4130
单向数据流 父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值 但是反过来则不行。你不应该在一个子组件内部改变 prop。否则Vue 会在浏览器的控制台中发出如上图的警告 这是Vue官方防止从子组件意外变更父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。
解决vue 子组件修改父组件传来的props值报错问题
10-16
以上就是在Vue中解决子组件修改父组件props值报错问题的方法。通过使用计算属性、数据或事件，我们可以保持数据流动的单向性，确保组件间的通信清晰且易于维护。记住，良好的组件设计应当遵循Vue的最佳实践，这样...
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
props 是 Vue 组件之间通信的重要手段，但是在子组件中修改 props 值时需要注意避免影响父组件的状态。下面我们将讨论如何正确地改变 props 值并向父组件传值。 为什么修改 props 值？ 通常，我们修改 props 值是...
vue的props实现子组件随父组件一起变化
09-01
为了使子组件能够监听到父组件`props`的变化，Vue提供了`props`选项来声明子组件期望接收的属性。在上面的例子中，子组件内部有： ```javascript props: ['myMessage'], ``` 这样，Vue知道`myMessage`是一个需要从...
vue 子组件中修改传入的 props 问题
前端看世界
12-30 3315
vue 的开发中会遇到在子组件中修改传入的 props 数据, 而单向数据流的思想下 props 数据是不应该被直接修改的.我觉得主要有两种常用方式, 一是吧props 数据转存到 data 中修改操作, 另一个是在子组件中更新父组件中的数据。
Vue中父子Props传值不能修改的原因分析以及解决办法
最新发布
MtangEr的博客
12-19 2199
vue 父子传值prop值不能修改，保持单向数据流
记录：Vue 子组件修改父组件传来的props值报错问题
Web_monkey888的博客
11-03 1613
本文是工作中遇到问题解决后的记录，方便以后查阅。 父组件传值给子组件props，子组件将props接受到的值用做v-model双向数据绑定 因为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 bas.
vue 弹框子组件关闭时报错(子组件修改父组件传过来的props报错)
H的博客
12-22 1892
废话 常见报错 大概意思就是子组件不能直接更改父组件props的数据 常见场景，点击弹出子组件，你在取消和确定上，写了emit，不会报错，但是点空白处，或者X，时，就会报错 正文 普通写法 父组件 子组件 看似没问题，但是就会报错 解决方法 第一种 子组件 父组件不动，子组件，关闭前去触发父组件的cancel 方法，将props传的改为false，方便 :before-close=" () => { $emit('cancel', false);
vue组件传值报错： Instead, use a data or computed property based on the prop‘s value. Prop being mutated: “
热门推荐
sunshineTing2的博客
09-30 1万+
问题 问题：在单选组件（radio）切换后，修改了来自父组件的值（item），然后报错如下： 原因 prop是单向绑定，不能更改数据，只能由父组件传输过来 解决 1、可以在子组件中 声明一个中间变量（value），把父组件传过来的值(item)赋值给中间变量(value),当单选切换时修改的数据为value,就不会报错 2、使用.sync修饰符与$emit(update:xxx) 父组件 <comp :item.sync="item"></comp> 子组件 this.$emit
子组件直接改变父组件传的值的报错问题
qq_45337854的博客
12-04 1198
子组件直接改变父组件传的值的报错问题
父子组件传值错误
qq_45803593的博客
06-30 468
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: "addFriendVisible"
Vue解决子组件修改父组件props参数不可逆问题
孙振光的博客
02-11 2368
直接赋值props里面数据会导致如下错误 1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件 修改后： 父组件 //html <tree-list :typeList="typeList" :subTypeList="subTypeList" @showSubType="updateSubType"></tre...
vue中子组件直接修改父组件prop属性bug
前端队长Daotin
12-06 703
在有些时候，子组件直接修改父组件传来的 prop 对象的属性会出现不同步的问题。 比如，父组件传过来的一个对象 checkBoxObj: checkBoxObj:{ checked: false } 将 checked 通过v-model绑定给子组件的 checkbox，然后点击这个checkbox，试图改变 checked 的值，但是有时候会发现 checkbox 的选中状态和...
解决子组件修改props的值报错
06-06
如果子组件需要修改props的值，应该通过事件的方式向父组件发送消息，由父组件来修改props的值。 如果子组件直接修改props的值，会报出一个警告，如下所示： ``` [Vue warn]: Avoid mutating a prop directly ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值