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 文件




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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号