error Unexpected mutation of “xxxxx“ prop

于 2024-10-24 15:55:43 发布
阅读量1.3k 收藏
点赞数 6
文章标签： 1024程序员节 eslint vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lotpyve/article/details/143211144
版权

错误是在进行 eslint 检查的时候触发的，这个错误的原因是我们在子组件中改变了父组件传递过来的 props

解决方法一：

不改变父组件传递过来的 props，如果需要改变父组件传递过来的值，可以使用  defineModel() 进行接收值，如果不了解 defineModel() 的可以去 vue3 的官网看一下

解决方法二：

在 eslint 的配置文件中，直接关闭此条 eslint 的规则，

 'vue/no-mutating-props': "off",

 eslint的配置文件名可能为以下名称，以前的版本还有 .eslintrc.js 等也是 eslint 的配置文件

Lysun001
关注
子组件中修改props值报错(error Unexpected mutation of “---“ prop vueno-mutating-props)
jadetii的学习地盘
04-21 2114
总结：多个组件需要使用的数据可用全局事件总线（一方修改多方变化，但缺点也很明显：要注意全局变量重复问题，而且需要在订阅事件的组件里手动销毁监听否则会多次执行。），但部分数据只存在于一两个组件间时可以用props传递，但修改时要注意规避单向数据流的问题。父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值。但是反过来则不行，不应该在一个子组件内部改变 prop。1.只是在当前组件使用不传回数据可以利用拷贝（必要时可使用深拷贝）和计算属性得到数据后使用。
嵌套 v-model 解决 Unexpected mutation of “XXX“ prop `vueno-mutating-props`
m0_67393413的博客
03-06 3964
嵌套 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组件Prop传递数据的实现示例
12-09
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。 prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。 每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。 1、Prop静态传递数据 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script ty
Unexpected mutation of “xxxx“ prop
https://shixuebin.gitee.io/hexo-blog/
08-31 2209
如果是弹窗等组件，可以根据功能进行修改，比如我这块用的 element ui 的 dialog，便可以改成这样。如果您使用的是 input 组件，需要加个 @update 方法, 就可以了。是因为子级修改了父级的数据，所以eslint执行的时候报了这个错。新建子组件变量，然后使用watch进行，父级子级，变量数据同步。使用 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)
Unexpected mutation of “xxxx“ prop问题
最新发布
AM1n98的博客
05-31 1266
在接手别人的代码时，发现代码其中一个组件报错：Unexpected mutation of "xxxx" prop。
Unexpected mutation of “XXXX“ prop
weixin_45966674的博客
08-17 9535
强调语法格式 解决编码规范性问题
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 2147
父组件通过props将数据的更新向下流动到子组件中，子组件中所有的 props 都将会实时更新为最新值。这是Vue防止从子组件意外变更新父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。不应该在子组件内部修改定义好的props。并将这个本地 prop 当作其初始值，即如下定义。
Unexpected mutation of "data" prop
12-14
"Unexpected mutation of 'data' prop"是Vue.js中的一个错误，它表示你正在尝试修改一个父组件传递给子组件的prop。这是不允许的，因为prop应该是只读的，子组不应该修改它们。这是为了确保数据流向的单向性，从而使...
VUE3 子组件修改props数据，Unexpected mutation of “xxx“ prop解决方法
lzh6hao0的博客
04-18 5731
VUE3 子组件修改props数据; vue3 Unexpected mutation of "xxx" prop解决方法
Vue - 解决子组件中修改props值报错(error Unexpected mutation of “---“ prop vue/no-mutating-props)
热门推荐
王光迪的优快云
02-24 3万+
error： Unexpected mutation of "、、、" prop vue/no-mutating-props
vue解决子组件中报错 Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)
唐唐唐行的博客
07-13 2万+
vue解决子组件中报错 Unexpected mutation of "xxx" prop
eslint报错与警告，error Unexpected mutation of “---“ prop vue/no-mutating-props，warning Delete `␍`
weixin_43768107的博客
09-29 7165
错误截图 eslint不建议子元素通过v-model修改父元素传的props值 在starfisih-h5低代码项目中需要这样的场景，所有解决方案是把该eslint规则给禁用了 rules: { 'vue/no-mutating-props': 0, },
记一个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即可 ...
嵌套 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 组件 为例，这个组件可以通过
Vue项目Unexpected mutation of “isVisible“ prop报错
isDIK的博客
11-08 4537
vue
v-model语法糖 用于父组件与子组件值绑定（Unexpected mutation of “XXX” prop vue/no-mutating-props）
qq_45862085的博客
08-17 722
v-model用于父子组件的传值
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值