vue3 父子传值Unexpected mutation of **

最新推荐文章于 2023-02-08 10:16:32 发布
最新推荐文章于 2023-02-08 10:16:32 发布
阅读量331 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lsh_002_77/article/details/128531346
版权

 错误截图如上,原因是 vue是单向数据流,识别到了子组件中对父组件传来的值进行了改变

父传子修改前

父组件:

 子组件:

 本意是想要从父组件中传给子组件一个 数,在子组件中接收值并进行 +1 的行为

就会出现上述的错误Unexpected mutation of ******,也是通过查找资料,发现与vue是单向数据流有关!

我的思路是,声明一个新的变量,来装父组件传来的值,对其进行修改,这样就能避免直接对父组件传来的值进行改变

修改后

父组件不变,子组件:

声明一个num变量,其默认值就是从父组件中传来的值props1 

写对应的方法的内容,即把num值进行++操作

父传子实现的效果

子传父

目的也是希望子组件中修改后的值传给父组件

子组件:

 

 自定义事件名为aaa,值为num.value

父组件:

 将子组件中改变后的值再传回给父组件,父组件中也能有+1的变化

效果:

子传父 父传子 最终效果

我的文章内容较为浅显,只是我自己在学习过程中出现的问题的记录,后续深度研究会更新文章。

如果想深度研究的小伙伴,可以去查查vue的单向数据流!

Lsh_002_77
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
嵌套 v-model 解决 Unexpected mutation of “XXX“ prop `vueno-mutating-props`
m0_67393413的博客
03-06 3594
嵌套 v-model 解决 Unexpected mutation of “XXX” prop vue/no-mutating-props 我们在进行 Vue 开发的时候，经常会遇到一些对可使用 v-model 的组件包装嵌套的需求，但若使用不慎，就会引发 vue/no-mutating-props 的问题。本文将记录一种在 v-model 嵌套时的做法，以避免这个问题。 本文使用 Vue 3 语法。 1. 问题复现 我们以 Naive UI 框架库中的 NDrawer 组件 为例，这个组件可以通过 v
解决Vue中 父子传值 数据丢失问题
10-16
主要介绍了解决Vue中 父子传值 数据丢失问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue3 传参报错 Unexpected mutation of “value“ prop
b1ackc4t的博客
02-16 9742
问题原因 value是我定义的props，而vue是不允许子组件改变父组件传来的参数值的，自然不能放在v-model里了，不然就被表单乱改值。 解决方法 为了让父组件能在子组件里创建双向数据绑定，我们应该自定义一个v-model，而不是传递props 子组件 <template> <div style="text-align: center"> <input v-model="value" placeholder="edit me" />
Unexpected mutation of “XXXX“ prop
weixin_45966674的博客
08-17 9449
强调语法格式 解决编码规范性问题
Vue项目Unexpected mutation of “isVisible“ prop报错
isDIK的博客
11-08 3982
vue
Unexpected mutation of “dialogable“ prop.eslintvue/no-mutating-props
H-rosy的博客
08-05 2991
今天写弹框组件时报错Unexpected mutation of "dialogable" prop.eslint然后去搜了一下答案，我觉得有篇文章的概念讲的不错：其实这就是Vue的单向数据流的概念，因为识别到子组件中修改了props值。父组件通过props将数据的更新向下流动到子组件中，子组件中所有的 props 都将会实时更新为最新值。 但是反过来则不行。不应该在子组件内部修改定义好的props。 这是Vue防止从子组件意外变更新父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。...
vue3父子组件传值.doc
02-05
vue3父子组件传值
基于Vue中的父子传值问题解决
10-15
主要介绍了基于Vue中的父子传值问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
vue父子模板传值问题解决方法案例分析
10-15
主要介绍了vue父子模板传值问题解决方法,结合案例形式分析了vue.js父子模板传值问题相关实现方法与具体操作步骤,需要的朋友可以参考下
记一个vue属性传递错误 error Unexpected mutation of “xxxx“ prop
热门推荐
蛐蛐的博客
10-22 2万+
1.简介 vue传递属性报错：error Unexpected mutation of "xxxx" prop，其中xxx为属性名 2.解决 vue传递属性时如果没有.sync修饰符，默认不允许在子组件中修改属性，而v-model也算是一种修改 如果属性是一个对象，修改对象的属性也算是修改，v-model改为:value即可 ...
vue3报错 Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)
jieyucx的博客
12-12 1万+
vue3报错 Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)
vue解决子组件中报错 Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)
唐唐唐行的博客
07-13 2万+
vue解决子组件中报错 Unexpected mutation of "xxx" prop
VUE组件数据父传子引用报错
m0_61781282的博客
02-08 378
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:
解决子组件prop出现 Unexpected muntation of ‘userChannels‘ prop. 问题
weixin_64747231的博客
09-15 311
解决子组件prop出现 Unexpected muntation of 'userChannels' prop. 问题
Unexpected mutation of “XXX“ prop 如何解决
m0_56769726的博客
09-09 1万+
props 里面的数据规则 : prop 是父组件传过来的数据，受父组件数据影响的。 如果是普通数据（数字、字符串、布尔值）绝对不能修改，即便改了也不回传导给父组件。 如果是引用类型（数组，对象），可以修改，例如：[].push() 对象.xxx = xxx 。 不能重新赋值，如： xxx = []
【Vue】子组件修改props值报错“Unexpected mutation of “todo“ prop...“(已解决)
yolo_______95的博客
10-13 1957
父组件通过props将数据的更新向下流动到子组件中，子组件中所有的 props 都将会实时更新为最新值。这是Vue防止从子组件意外变更新父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。不应该在子组件内部修改定义好的props。并将这个本地 prop 当作其初始值，即如下定义。
嵌套 v-model 解决 Unexpected mutation of “XXX“ prop `vue/no-mutating-props`
sigmarising的博客
10-11 2万+
嵌套 v-model 解决 Unexpected mutation of “XXX” prop vue/no-mutating-props 我们在进行 Vue 开发的时候，经常会遇到一些对可使用 v-model 的组件包装嵌套的需求，但若使用不慎，就会引发 vue/no-mutating-props 的问题。本文将记录一种在 v-model 嵌套时的做法，以避免这个问题。 本文使用 Vue 3 语法。 1. 问题复现 我们以 Naive UI 框架库中的 NDrawer 组件 为例，这个组件可以通过
vue2和vue3父子传值的区别
最新发布
10-10
在Vue2和Vue3中，父子组件之间传值的方式有一些区别。 在Vue2中，父组件可以通过props属性将数据传递给子组件，子组件通过props选项来接收父组件传递过来的值。父组件可以在模板中使用v-bind指令来传递数据，子组件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值