原理
单向数据流
父组件通过props将数据的更新向下流动到子组件中,子组件中所有的 props 都将会实时更新为最新值。
但是反过来则不行。不应该在子组件内部修改定义好的props。
这是Vue防止从子组件意外变更新父级组件的状态内容,这样会导致你应用的数据流向杂乱无章。
解决办法
再定义一个本地的data prop
并将这个本地 prop 当作其初始值,即如下定义Itemtodo
为props中todo
的值,后续直接使用Itemtodo
,解决。
...
props: ["todo",'deleteTodo'],
data() {
return {
Itemtodo: this.todo,
};
},
...