子组件里 props.list.push(item) 之后控制台报 Vue warn: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders,列表还偶尔闪回旧值,点删除也没生效,只有刷新整个页面才恢复,控制台警告一条接一条。日志里能对上时间点,这种反而好排。
props 是单向数据流,子组件拿到的是父级对象引用,直接改会污染父级状态,父级下次渲染又把值覆盖回去,所以改动根本留不住。这一点先确认清楚,后面就不用反复试。
const emit = defineEmits(['update:list']);
emit('update:list', [...props.list, item]);
这次卡住的地方就在「子组件修改 props」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。
报错里带路径的,先去看那个路径在不在、权限对不对。
处理上按这个顺序:子组件用 emit 把变更交给父级处理,自己不写 props,也不要直接写;需要本地编辑时先把 props 深拷贝成一份独立数据,避免污染父级;对象类型改用 v-model 的 update 事件做双向同步,父级负责落库。
结果对不对很好判断,控制台不再出现 prop 修改警告,父级列表按提交结果更新,顺序也正确。
