vue3实现 TodoList 运用到的点组件传值props, ref, onMounted, reactive, toRefs, watch

发布时间：2023-05-03 14:30

vue3 实现简单的todolist，
运用到的知识点：组件传值props, ref, onMounted, reactive, toRefs, watch
实现功能如下图。
$\"vue3实现$
在追加一个全部删除按钮
$\"vue3实现$
$\"vue3实现$
在app里添加

// 全部删除
   const delAll = (id) => {
      state.todos = state.todos.filter((val) => {
        console.log(val.id, \"val\");
        val.id !== id;
      });
    };
  记得传值过去就行

介绍下，我这里进行了封装和父子组件传值。

$\"vue3实现$
App文件（父组件）

type封装就一点不在上代码，看图就行
$\"vue3实现$
utils 存储封装也很少
$\"vue3实现$
head 头部代码

	
	
	
	此时头部操作结束。

list文件

Item 文件

底部的 footer 文件

就这样结束了。
如果不想这样来回的组件封装。在一个文件中直接展示，可以看下个文件

vue3实现 TodoList 运用到的点 组件传值props, ref, onMounted, reactive, toRefs, watch

相关推荐

vue3实现 TodoList 运用到的点组件传值props, ref, onMounted, reactive, toRefs, watch