嵌套 v-model 解决 Unexpected mutation of “XXX“ prop `vueno-mutating-props`

最新推荐文章于 2023-10-16 13:54:32 发布
VIP文章 最新推荐文章于 2023-10-16 13:54:32 发布
阅读量3.5k 收藏 5
点赞数 2
分类专栏： 前端 html 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67393413/article/details/123305144
版权

嵌套 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-model:show="" 的方式控制抽屉的开关：
官方示例用法
不过我们需要对这个组件进行二次封装来满足更多的需求，我的封装代码如下：

最低0.47元/天 解锁文章
m0_67393413
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
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-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
10-17
主要介绍了vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Rails博客嵌套表格v-000
02-20
Rails博客：复杂的嵌套表单 我们将在Blog App的上一版本的基础上进行构建，在该版本中，我们为User和Tag （以及适用的关联）创建了新模型并编写了验证。 我们要清理标记功能。 我们将标签添加到新帖子的功能非常有用，但是如果在撰写新帖子时要添加列表中没有的新标签怎么办？ 让我们来构建它。 注意：与我们的许多Rails课程一样，记住在生成模型，控制器等时始终使用--no-test-framework标志。这样，Rails生成器将不会在测试套件的顶部创建其他测试。课程已经附带了。 例如， rails g model User username:string email:string --no-test-framework 。 但是，由于我们已提供了启动程序文件，因此本练习无需这样做。 标签 我们需要在PostsController更改允许的参数，以接受另一个属性:tags_attr
vue解决子组件中报错 Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)
热门推荐
唐唐唐行的博客
07-13 2万+
vue解决子组件中报错 Unexpected mutation of "xxx" prop
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组件中的vue/no-mutating-props问题解决
09-01 3499
例如，在一个组件中，如果试图修改props的值，ESLint会报错，提示不要直接修改props的值。2、在data属性中定义变量，接收props中传入的参数，再用data属性中的变量与模板部分进行绑定，即可规避和解决vue/no-mutating-props问题。接收外部参数的组件，在data属性中定义变量，接收props中的传入的值后，在利用data属性中的变量与模板实现数据的双向绑定是一个极好的习惯。vue项目中的组件，实现模板与数据的双向绑定时，数据最好来自组件的data属性。
Unexpected mutation of “dialogVisible“ prop.
最新发布
qq_34498806的博客
10-16 863
Vue2项目在封装element-ui的dialog组件时，eslint报错。属性，不允许在子组件中修改父组件的值。计算属性，将值改变事件抛给父组件。大致意思是父组件传递过来的。
vue-cli 打包后提交到线上出现 “Uncaught SyntaxError:Unexpected token” 报错
01-21
前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分) 问题1.导航点击无法正常跳转,console...
vue组件Prop传递数据的实现示例
12-09
要让子组件使用父组件的数据，我们需要通过子组件的props选项。 prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。 每次父组件更新时，子组件...
orabbix解决兼容问题的orabbix-1.2.3.jar
12-25
解决 Orabbix报错“received unexpected response ' ' for key 'archive' ” 该问题是因为 zabbix4.0及以上版本和 orabbix-1.2.3不兼容导致的。 需要重新编译Sender.java进去。 我这里已经准备好了编译过的jar包。...
pxe-boot：pxe引导设置命令
02-06
pxe-boot：pxe引导设置命令
Unexpected mutation of “XXX“ prop 如何解决
m0_56769726的博客
09-09 1万+
props 里面的数据规则 : prop 是父组件传过来的数据，受父组件数据影响的。 如果是普通数据（数字、字符串、布尔值）绝对不能修改，即便改了也不回传导给父组件。 如果是引用类型（数组，对象），可以修改，例如：[].push() 对象.xxx = xxx 。 不能重新赋值，如： xxx = []
vue3（基于vite）项目初始基本配置
白的夜的博客
06-17 7253
从零开始带你一步步搭建一个完整的vue项目配置
子组件中修改props值报错(error Unexpected mutation of “---“ prop vueno-mutating-props)
jadetii的学习地盘
04-21 1684
总结：多个组件需要使用的数据可用全局事件总线（一方修改多方变化，但缺点也很明显：要注意全局变量重复问题，而且需要在订阅事件的组件里手动销毁监听否则会多次执行。），但部分数据只存在于一两个组件间时可以用props传递，但修改时要注意规避单向数据流的问题。父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值。但是反过来则不行，不应该在一个子组件内部改变 prop。1.只是在当前组件使用不传回数据可以利用拷贝（必要时可使用深拷贝）和计算属性得到数据后使用。
嵌套 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 组件 为例，这个组件可以通过
Vue3+vue/cli4.5.x版本升级采坑(3) - Eslint校验报错/Vue语法不兼容
sherleysong的专栏
04-21 1万+
“@vue/component-compiler-utils”: “^3.1.2”, “vue-template-compiler”: “^2.6.12”, “babel-plugin-component”: “^1.1.1”, “less”: “^4.1.1”, “style-resources-loader”: “^1.4.1”, “vue-cli-plugin-style-resources-loader”: “~0.1.5” 报错问题截图 代码层面改造： .native报错 <!
Element 表单验证项v-model绑定值为对象下嵌套的子对象的属性时无法验证
m0_61663332的博客
07-15 1093
Element 表单验证项v-model绑定值为对象下嵌套的子对象的属性时无法验证
Unexpected mutation of “dialogable“ prop.eslintvue/no-mutating-props
H-rosy的博客
08-05 2938
今天写弹框组件时报错Unexpected mutation of "dialogable" prop.eslint然后去搜了一下答案，我觉得有篇文章的概念讲的不错：其实这就是Vue的单向数据流的概念，因为识别到子组件中修改了props值。父组件通过props将数据的更新向下流动到子组件中，子组件中所有的 props 都将会实时更新为最新值。 但是反过来则不行。不应该在子组件内部修改定义好的props。 这是Vue防止从子组件意外变更新父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。...
error Unexpected mutation of “xxx“ prop vue/no-mutating-props
weixin_45750034的博客
03-21 4396
标题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
代码解释Unexpected mutation of "channelList" prop vue/no-mutating-props
05-21
这是Vue.js的警告信息，意思是在组件中修改了一个被声明为 props 的属性 channelList。在Vue.js中，props是从父组件传递给子组件的属性，子组件不能直接修改这些属性，否则可能会导致数据混乱或不一致。 为了避免这...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值