发布时间:2023-05-03 14:30
vue3 实现简单的todolist,
运用到的知识点: 组件传值props, ref, onMounted, reactive, toRefs, watch
实现功能如下图。
在追加一个全部删除按钮
在app里添加
// 全部删除
const delAll = (id) => {
state.todos = state.todos.filter((val) => {
console.log(val.id, \"val\");
val.id !== id;
});
};
记得传值过去就行
介绍下,我这里进行了封装和父子组件传值。
type封装就一点不在上代码,看图就行
utils 存储封装也很少
head 头部代码
此时头部操作结束。
list文件
Item 文件
底部的 footer 文件
就这样结束了。
如果不想这样来回的组件封装。在一个文件中直接展示,可以看下个文件