VUE学习(十四)、TodoList案例（基于props实现组件间通信通）

最新推荐文章于 2024-07-25 08:49:08 发布
最新推荐文章于 2024-07-25 08:49:08 发布
阅读量373 收藏 4
点赞数 3
分类专栏： VUE 文章标签： vue.js javascript 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/122782595
版权

VUE学习(十四)、TodoList案例（基于props实现组件间通信通）

一、案例演示

在这里插入图片描述

二、案例组件目录

在这里插入图片描述

三、编码

1、MyFooter组件

<template>
    <div class="todo-footer" v-show="total">
        <label>
            <!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
            <input type="checkbox" v-model="isAll" />
        </label>
        <span>
            <span>已完成{{ doneTotal }}</span> / 全部{{ total }}
        </span>
        <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
    </div>
</template>

<script>
export default {
    name: "MyFooter",
    props: ["todos", "checkAllTodo", "clearAllTodo"],
    computed: {
        //总数
        total() {
            return this.todos.length;
        },
        //已完成数
        doneTotal() {
            /* 
                let i=0;
                this.todos.forEach((todo)=>{
                    if(todo.done) i++;
                })
                return i
			*/

            //此处使用reduce方法做条件统计
            /* 
                pre，上一次调用此函数返回的值(初次0)
                current，当前的数组项
                最后一次的返回值就是reduce的返回值
                const x = this.todos.reduce((pre,current)=>{
                    console.log('@',pre,current)
                    return pre + (current.done ? 1 : 0)
                },0) 
			*/
            //简写
            return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);
        },
        //控制全选框
        /* 
				isAll(){
					return this.doneTotal === this.total && this.total > 0
				}
			*/
        isAll: {
            //全选框是否勾选
            get() {
                return this.doneTotal === this.total && this.total > 0;
            },
            //isAll被修改时set被调用
            set(value) {
                this.checkAllTodo(value);
            }
        }
    },
    methods: {
        /* 
			    // 全选
				checkAll(e){
					this.checkAllTodo(e.target.checked)
				} 
			*/
        //清空所有已完成
        clearAll() {
            this.clearAllTodo();
        }
    }
};
</script>

<style scoped>
/*footer*/
.todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
}

.todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}

.todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
}

.todo-footer button {
    float: right;
    margin-top: 5px;
}
</style>

2、MyHeader组件

<template>
	<div class="todo-header">
		<input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
	</div>
</template>

<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'MyHeader',
		//接收从App传递过来的addTodo回调函数（父组件会得到从这里传入函数中的值）
		props:['addTodo'],
		data() {
			return {
				//收集用户输入的title
				title:''
			}
		},
		methods: {
			add(){
				//校验数据
				if(!this.title.trim()) return alert('输入不能为空')
				//将用户的输入包装成一个todo对象
				const todoObj = {id:nanoid(),title:this.title,done:false}
				//通知App组件去添加一个todo对象
				this.addTodo(todoObj)
				//清空输入
				this.title = ''
			}
		},
	}
</script>

<style scoped>
	/*header*/
	.todo-header input {
		width: 560px;
		height: 28px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 4px 7px;
	}

	.todo-header input:focus {
		outline: none;
		border-color: rgba(82, 168, 236, 0.8);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>

3、MyItem组件

<template>
    <li>
        <label>
            <!-- 设置标签动态地拥有某个属性 -->
            <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" />
            <!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
            <!-- <input type="checkbox" v-model="todo.done"/> -->
            <span>{{ todo.title }}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
export default {
    name: "MyItem",
    //声明接收todo、checkTodo、deleteTodo
    props: ["todo", "checkTodo", "deleteTodo"],
    methods: {
        //勾选or取消勾选
        handleCheck(id) {
            //通知App组件将对应的todo对象的done值取反
            this.checkTodo(id);
        },
        //删除
        handleDelete(id) {
            if (confirm("确定删除吗？")) {
                //通知App组件将对应的todo对象删除
                this.deleteTodo(id);
            }
        }
    }
};
</script>

<style scoped>
/*item*/
li {
    list-style: none;
    height: 36px;
    /* line-height: 36px; */
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
}

li label {
    float: left;
    cursor: pointer;
}

li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}

li button {
    float: right;
    display: none;
    margin-top: 3px;
}

li:before {
    content: initial;
}

li:last-child {
    border-bottom: none;
}

li:hover {
    background-color: #ddd;
}

li:hover button {
    display: block;
}
</style>

4、MyList组件

<template>
	<ul class="todo-main">
		<MyItem 
			v-for="todoObj in todos"
			:key="todoObj.id" 
			:todo="todoObj" 
			:checkTodo="checkTodo"
			:deleteTodo="deleteTodo"
		/>
	</ul>
</template>

<script>
	import MyItem from './MyItem'

	export default {
		name:'MyList',
		components:{MyItem},
		//声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的
		props:['todos','checkTodo','deleteTodo']
	}
</script>

<style scoped>
	/*main*/
	.todo-main {
		margin-left: 0px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding: 0px;
	}

	.todo-empty {
		height: 40px;
		line-height: 40px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding-left: 5px;
		margin-top: 10px;
	}
</style>

5、App.vue

<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<!-- 传递一个方法 -->
				<MyHeader :addTodo="addTodo"/>
				<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
				<MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
			</div>
		</div>
	</div>
</template>

<script>
	import MyHeader from './components/MyHeader'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter.vue'

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				todos:[
					{id:'001',title:'抽烟',done:true},
					{id:'002',title:'喝酒',done:false},
					{id:'003',title:'开车',done:true}
				]
			}
		},
		methods: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
				console.log("收到来自子组件的数据",todoObj)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//删除一个todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
			//清除所有已经完成的todo
			clearAllTodo(){
				this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		}
	}
</script>

<style>
	/*base*/
	body {
		background: #fff;
	}
	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}
	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}
	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}
	.btn:focus {
		outline: none;
	}
	.todo-container {
		width: 600px;
		margin: 0 auto;
	}
	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>

总结TodoList案例

1、 组件化编码流程：

(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

​ 1).一个组件在用：放在组件自身即可。

​ 2). 一些组件在用：放在他们共同的父组件上（状态提升）。

(3).实现交互：从绑定事件开始。

2、 props适用于：

(1).父组件 ==> 子组件 通信

(2).子组件 ==> 父组件 通信（要求父先给子一个函数）

3、 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

4、 props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

拓展 本地存储 webStorage

  1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

  2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

  3. 相关API：

    1. xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    2. xxxxxStorage.getItem('person');

      该方法接受一个键名作为参数，返回键名对应的值。

    3. xxxxxStorage.removeItem('key');

      该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. xxxxxStorage.clear()

      该方法会清空存储中的所有数据。

  4. 备注：

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage存储的内容，需要手动清除才会消失。
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
    4. JSON.parse(null)的结果依然是null。

todoList案例本地存储

修改app.vue

<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
                <MyHeader :addTodo="addTodo" />
                <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
                <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo" />
            </div>
        </div>
    </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
import MyList from "./components/MyList";
import MyFooter from "./components/MyFooter.vue";

export default {
    name: "App",
    components: { MyHeader, MyList, MyFooter },
    data() {
        return {
            //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
            todos: JSON.parse(localStorage.getItem("todos")) || [] // 初始时为null，所以选择一个空数组
        };
    },
    methods: {
        //添加一个todo
        addTodo(todoObj) {
            this.todos.unshift(todoObj);
        },
        //勾选or取消勾选一个todo
        checkTodo(id) {
            this.todos.forEach((todo) => {
                if (todo.id === id) todo.done = !todo.done;
            });
        },
        //删除一个todo
        deleteTodo(id) {
            this.todos = this.todos.filter((todo) => todo.id !== id);
        },
        //全选or取消全选
        checkAllTodo(done) {
            this.todos.forEach((todo) => {
                todo.done = done;
            });
        },
        //清除所有已经完成的todo
        clearAllTodo() {
            this.todos = this.todos.filter((todo) => {
                return !todo.done;
            });
        }
    },
    watch: {
		// 没有深度监视
        // todos(value) {
        //     localStorage.setItem("todos", JSON.stringify(value));
        // },

		// 开启了深度监视
        todos: {
            deep: true,
            handler(value) {
                localStorage.setItem("todos", JSON.stringify(value));
            }
        }
    }
};
</script>

<style>
/*base*/
body {
    background: #fff;
}
.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}
.btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
}
.btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
}
.btn:focus {
    outline: none;
}
.todo-container {
    width: 600px;
    margin: 0 auto;
}
.todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
</style>
心醉瑶瑾前
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue的todoList案例
m0_55916923的博客
08-30 1338
todolist案例
Vue学习（十三）todoList小案例
qq_29107721的博客
06-12 187
对TodoList小案例的一个小总结
初学Vue（全家桶）：toDolist案例入门版（props配置实现组件间交互）
lalala_dxf的博客
06-04 459
vue实现的一个小案例
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
北
11-15 682
自己拍的小云彩 源码在文末。 前言 上篇文章写了个V利用Props进行组件之间的通信，这不立马就安排上这个案例拉丫。光学不敲等于没学哈（资深大佬除外哈） 目标就是实现如下的样子： 能够进行增删改查，并且是在各个组件之间。 一、环境准备 针对这个页面，我们将他们划分为下面四个组件哈。其实也不是固定的，只是为了更好的展示组件之间的通信。 项目结构： 准备静态页面 MyTodoHeader头部组件： <template> <div class="todo-header-box"&gt.
Vue：实现TodoList案例（尚硅谷）
做一只猫的博客
08-04 9657
TodoList案例
基于Vue组件实现TodoList
奶茶控
12-03 1965
实现功能： 1、将已有的任务渲染到页面 2、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加） 3、动态计算有几个已完成的任务 4、点击复选框，实现选中或不选中效果（即完成或未完成） 5、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表 所拆分的组件有：管理所有的组件App[ Header组件、List组件[Item组件]、Footer组件] 功能一：将已有的任务渲染到页面 ...
todoList案例（vue版本）（消息订阅与发布实现组件通信）
richest_qi的博客
05-12 234
文章目录消息订阅与发布的基本使用App.vue（App组件)List.vue（List组件）Item.vue（Item组件）Footer.vue（Footer组件）相关链接 父组件向子组件传递数据，使用props即可。 子组件向父组件传递数据，也可以使用props，将props值设置为一个函数即可。 子组件向父组件传递数据，还可以使用自定义事件来实现。 全局事件总线，可以实现任意组件间通信。 消息订阅与发布，也可以实现任意组件间通信。 本篇通过消息订阅与发布实现任意组件间通信，来完成todoList案例。
初学Vue（全家桶）：todoList案例进阶版-全局总线实现组件间通信
lalala_dxf的博客
06-10 206
todoList案例进阶版-全局总线实现
Vue实战——TodoList案例(附js原生和vue源码）
2301_76885465的博客
05-12 1286
分别用原生js和Vue框架实现todolist项目（附有源码）
使用Vue父子组件通信实现todolist的功能示例代码
10-17
在本文中，我们将深入探讨如何使用Vue.js框架中的父子组件通信机制来实现一个简单的todolist功能。Vue.js是一个流行的前端JavaScript库，它提供了一种声明式的数据绑定和组件化的方法，使得开发用户界面更加简洁高效...
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
在这个教程中，我们将探讨如何使用Vue实现一个基本的待办事项（TodoList）功能，包括组件拆分和删除功能。 首先，让我们看一个简单的TodoList功能的实现。在HTML中，我们有一个`<input>`元素和一个提交按钮，它们...
vue3+ts入门（todolist案例）
02-10
在这个"vue3+ts入门（todolist案例）"中，我们将探讨如何结合 Vue3 和 TypeScript 创建一个简单的待办事项列表应用，即 Todolist。 1. **Vue3 的主要更新**： - **Composition API**：Vue3 引入了 Composition API...
Vue中父子组件通讯之todolist组件功能开发
08-27
在Vue.js框架中，父子组件通信是一项基础且重要的功能，它允许组件之间共享数据和行为，以实现更复杂的交互。本文将深入探讨如何在Vue中实现一个todolist组件，以及如何进行组件拆分和数据传递。 首先，我们来看一...
Vue实现todolist删除功能
08-27
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个基本的待办事项列表（Todo List）应用，特别是关注删除功能的实现。Vue.js是一个轻量级的前端JavaScript框架，以其响应式数据绑定和组件化特性而受到广泛欢迎...
【前端】vue 报错:The template root requires exactly one element
最新发布
程序员-张师傅
07-25 909
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
07-24 556
Vue.js 是一个流行的JavaScript框架，因此，确保其组件按预期工作至关重要：有效，更重要的是，可靠。模拟依赖项是最有效的测试方法之一，我们将在本文中发现。模拟依赖项的必要性模拟依赖项是一种对测试施加控制的方法，它提供了将受测组件与其依赖项隔离开来的能力。由于所有框架都使用多个组件，这些组件的范围可以从 API 到服务，甚至是单击或悬停等交互，因此能够...
js-vue中多个按钮状态选中类似于复选框与单选框实现
2301_76671906的博客
07-24 346
js-vue中多个按钮状态选中类似于复选框与单选框实现
谷粒商城实战笔记-55-商品服务-API-三级分类-修改-拖拽数据收集
epitomizelu的专栏
07-24 1547
这一节的主要内容是收集拖拽后的要更新的节点的数据，逻辑比较复杂。所有这些数据都用收集到，然后发送给后台更新。拖拽结束后，触发拖拽结束事件，所以要在el-tree上绑定这个事件。事件函数nodeDrop定义如下。
vue轮播图组件封装，实现组件间的数据通信。
03-23
Vue轮播图组件封装是一种常见的前端开发技术，它可以实现在网页中展示多张图片，并通过组件间的数据通信来实现图片切换等功能。以下是一个简单的Vue轮播图组件封装的示例： 1. 创建一个Vue组件，命为Carousel： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

心醉瑶瑾前

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值