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

vue3 实现简单的todolist,
运用到的知识点: 组件传值props, ref, onMounted, reactive, toRefs, watch
实现功能如下图。
vue3实现 TodoList 运用到的点 组件传值props, ref, onMounted, reactive, toRefs, watch_第1张图片
在追加一个全部删除按钮
vue3实现 TodoList 运用到的点 组件传值props, ref, onMounted, reactive, toRefs, watch_第2张图片
vue3实现 TodoList 运用到的点 组件传值props, ref, onMounted, reactive, toRefs, watch_第3张图片
在app里添加

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

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

vue3实现 TodoList 运用到的点 组件传值props, ref, onMounted, reactive, toRefs, watch_第4张图片
App文件(父组件)




type封装就一点不在上代码,看图就行
vue3实现 TodoList 运用到的点 组件传值props, ref, onMounted, reactive, toRefs, watch_第5张图片
utils 存储封装也很少
vue3实现 TodoList 运用到的点 组件传值props, ref, onMounted, reactive, toRefs, watch_第6张图片
head 头部代码

	
	
	
	此时头部操作结束。

list文件

	
	
	

Item 文件




底部的 footer 文件




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

你可能感兴趣的:(javascript,前端,vue3)