Unexpected mutation of “xxxx“ prop

原因

是因为子级修改了父级的数据,所以eslint执行的时候报了这个错

修复方式 1

如果是弹窗等组件,可以根据功能进行修改,比如我这块用的 element ui 的 dialog,便可以改成这样

使用 model-value 代替

修复方式 2

新建子组件变量,然后使用watch进行,父级子级,变量数据同步

修复方式 3

如果您使用的是 input 组件,需要加个 @update 方法, 就可以了

js 复制代码
 <a-modal :visible="visible"  @update:visible="updateVisible" >
 
  const updateVisible = (e) => {
    emits('update:visible', e);
  };
  
  const emits = defineEmits<{
    (e: 'handleOk', val: any): void;
    (e: 'update:visible', val): void;
  }>();
相关推荐
VOLUN8 分钟前
PageLayout布局组件封装技巧
前端·javascript·vue.js
掘金安东尼9 分钟前
React 的 use() API 或将取代 useContext
前端·javascript·react.js
牛马喜喜9 分钟前
记录一次el-table+sortablejs的拖拽bug
前端
一枚前端小能手13 分钟前
⚡ Vite开发体验还能更爽?这些配置你试过吗
前端·vite
anyup30 分钟前
🔥 🔥 为什么我建议你使用 uView Pro 来开发 uni-app 项目?
前端·vue.js·uni-app
Skelanimals30 分钟前
Elpis全栈框架开发总结
前端
蓝胖子的小叮当34 分钟前
JavaScript基础(十三)函数柯里化curry
前端·javascript
孪创启航营38 分钟前
数字孪生二维热力图制作,看这篇文章就够了!
前端·three.js·cesium
宫水三叶的刷题日记41 分钟前
真的会玩,钉钉前脚辟谣高管凌晨巡查工位,小编随后深夜发文
前端·后端·面试
zzywxc7871 小时前
AI 行业应用:金融、医疗、教育、制造业领域的落地案例与技术实现
android·前端·人工智能·chrome·金融·rxjava