eslint报错与警告，error Unexpected mutation of “---“ prop vue/no-mutating-props，warning Delete `␍`

最新推荐文章于 2024-10-24 15:55:43 发布
最新推荐文章于 2024-10-24 15:55:43 发布
阅读量7.2k 收藏 2
点赞数 4
分类专栏： 错误解决方法 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43768107/article/details/120556194
版权
这篇博客探讨了在starfisih-h5低代码项目中遇到的问题，即子组件试图修改父组件传递的props。作者分享了解决方案，即通过在.eslintrc文件中将'vue/no-mutating-props'规则设为0来禁用此警告。同时，也展示了如何处理过多的endOfLine警告，将规则设置为.auto。文章提醒读者，尽管禁用规则可以快速解决问题，但可能影响代码质量。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

error Unexpected mutation of “—“ prop vue/no-mutating-props请添加图片描述

错误截图
eslint不建议子元素通过v-model修改父元素传的props值

在starfisih-h5低代码项目中需要这样的场景，所有解决方案是把该eslint规则给禁用了

.eslintrc 文件
rules: {
    'vue/no-mutating-props': 0,
  },

warning Delete ␍

请添加图片描述
警告截图

警告太多，看着不顺眼，解决

.eslintrc 文件
rules: {
    "endOfLine": "auto"
  },
子组件中修改props值报错(error Unexpected mutation of “---“ prop vueno-mutating-props)
jadetii的学习地盘
04-21 2142
总结：多个组件需要使用的数据可用全局事件总线（一方修改多方变化，但缺点也很明显：要注意全局变量重复问题，而且需要在订阅事件的组件里手动销毁监听否则会多次执行。），但部分数据只存在于一两个组件间时可以用props传递，但修改时要注意规避单向数据流的问题。父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值。但是反过来则不行，不应该在一个子组件内部改变 prop。1.只是在当前组件使用不传回数据可以利用拷贝（必要时可使用深拷贝）和计算属性得到数据后使用。
Vue - 解决子组件中修改props值报错(error Unexpected mutation of “---“ prop vue/no-mutating-props)
热门推荐
王光迪的CSDN
02-24 3万+
error： Unexpected mutation of "、、、" prop vue/no-mutating-props
error Unexpected mutation of “xxx“ prop vue/no-mutating-props
weixin_45750034的博客
03-21 4806
标题Vue解决子组件报错 error Unexpected mutation of “xxx” prop vue/no-mutating-props 这其实是vue 单项数据流的概念，这是Vue官方防止从子组件意外变更父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。 修改 props:{ config:Object } data(){ localConfig:this.config } 再将上面代码中的绑定数据替换 :current-page.sync=“config.page” :curre
git 提交 报 error Unexpected mutation of “data“ prop vue/no-mutating-props
qq_43233137的博客
09-27 1983
git 提交 报 error Unexpected mutation of "data" prop vue/no-mutating-props
Vue - 解决子组件中修改props值报错(error Unexpected mutation of “---“ prop vue/no-mutating-props)
u010227042的博客
05-27 4616
亲测可用，如有疑问请私信 Vue - 解决子组件中修改props值报错 其实这就是Vue的单向数据流的概念 单向数据流 父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值 但是反过来则不行。你不应该在一个子组件内部改变 prop。否则Vue 会在浏览器的控制台中发出如上图的警告 这是Vue官方防止从子组件意外变更父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。 那么怎么解决呢？很简单 修改 prop 的两种情形： ①：这个 prop 用来传递一.
嵌套 v-model 解决 Unexpected mutation of “XXX“ prop `vueno-mutating-props`
m0_67393413的博客
03-06 3990
嵌套 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】子组件修改props值报错“Unexpected mutation of “todo“ prop...“(已解决)
yolo_______95的博客
10-13 2170
父组件通过props将数据的更新向下流动到子组件中，子组件中所有的 props 都将会实时更新为最新值。这是Vue防止从子组件意外变更新父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。不应该在子组件内部修改定义好的props。并将这个本地 prop 当作其初始值，即如下定义。
Unexpected mutation of "props" prop vue/no-mutating-props
05-27
这似乎是一个关于Vue.js的警告信息，提示你不应该直接修改props属性。你应该使用Vue的响应式数据来更新组件的状态，或者使用一个本地的副本来操作数据。这样可以避免潜在的副作用和不必要的bug。如果您有更多关于Vue...
vue3.2 error Unexpected mutation of "datas" prop vue/no-mutating-prop
05-13
在 Vue 3 中， props 是不可变的，不能在子组件中直接修改。 为了解决这个问题，你需要在子组件中使用一个本地的数据变量来保存传递给它的 `datas` 属性。你可以通过添加一个 `data` 函数来实现这一点，然后在 `...
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 “dialogable“ prop.eslintvue/no-mutating-props
H-rosy的博客
08-05 3380
今天写弹框组件时报错Unexpected mutation of "dialogable" prop.eslint然后去搜了一下答案，我觉得有篇文章的概念讲的不错：其实这就是Vue的单向数据流的概念，因为识别到子组件中修改了props值。父组件通过props将数据的更新向下流动到子组件中，子组件中所有的 props 都将会实时更新为最新值。 但是反过来则不行。不应该在子组件内部修改定义好的props。 这是Vue防止从子组件意外变更新父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。...
vue解决子组件中报错 Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)
唐唐唐行的博客
07-13 2万+
vue解决子组件中报错 Unexpected mutation of "xxx" prop
标题Vue解决子组件报错 error Unexpected mutation of “xxx” prop vue/no-mutating-props
qq_43375584的博客
06-05 2787
这其实是vue 单项数据流的概念，这是Vue官方防止从子组件意外变更父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。解决办法： 修改后不仅要修改掉 v-model里的变量名即可 其他的也需要改掉这是我遇到的一个bug 也是很头疼的因为不能正常的操作 希望大家看到这边文章如果有更好的建议可以告诉我 谢谢！...
解决 Unexpected mutation of “XXX” prop vue/no-mutating-props
weixin_43512977的博客
04-30 1万+
解决 Unexpected mutation of “XXX” prop vue/no-mutating-props 普通属性直接使用 computed v-model 两种方案 父组件 <Dialog :title="title" v-model:dialogVisible="dialogVisible" :form="form" /> 子组件 <template> <el-dialog v-model="dialogVisible" :title="dialogT.
error Unexpected mutation of “xxxxx“ prop
最新发布
lotpyve的博客
10-24 1442
不改变父组件传递过来的 props，如果需要改变父组件传递过来的值，可以使用 defineModel() 进行接收值，如果不了解 defineModel() 的可以去 vue3 的官网看一下。eslint的配置文件名可能为以下名称，以前的版本还有 .eslintrc.js 等也是 eslint 的配置文件。错误是在进行 eslint 检查的时候触发的，这个错误的原因是我们在子组件中改变了父组件传递过来的 props。在 eslint 的配置文件中，直接关闭此条 eslint 的规则，
Unexpected mutation of “dialogVisible“ prop.
qq_34498806的博客
10-16 1722
Vue2项目在封装element-ui的dialog组件时，eslint报错。属性，不允许在子组件中修改父组件的值。计算属性，将值改变事件抛给父组件。大致意思是父组件传递过来的。
vue组件中的vue/no-mutating-props问题解决
09-01 5551
例如，在一个组件中，如果试图修改props的值，ESLint会报错，提示不要直接修改props的值。2、在data属性中定义变量，接收props中传入的参数，再用data属性中的变量与模板部分进行绑定，即可规避和解决vue/no-mutating-props问题。接收外部参数的组件，在data属性中定义变量，接收props中的传入的值后，在利用data属性中的变量与模板实现数据的双向绑定是一个极好的习惯。vue项目中的组件，实现模板与数据的双向绑定时，数据最好来自组件的data属性。
04 Vue属性配置
LoveG_G的博客
11-04 3134
Vue学习笔记、ref属性、props配置、混合、插件、样式、案例
Unexpected mutation of “xxxx“ prop
https://shixuebin.gitee.io/hexo-blog/
08-31 2252
如果是弹窗等组件，可以根据功能进行修改，比如我这块用的 element ui 的 dialog，便可以改成这样。如果您使用的是 input 组件，需要加个 @update 方法, 就可以了。是因为子级修改了父级的数据，所以eslint执行的时候报了这个错。新建子组件变量，然后使用watch进行，父级子级，变量数据同步。使用 model-value 代替。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值