父组件
<template>
<!-- 1-视图层 -->
<div class="todo-container">
<div class="todo-wrap">
<Header ref="head"/>
<List
:todos="todos"
:deleteTodo="deleteTodo"
:updataTodo="updataTodo"
/>
</div>
</div>
</template>
<script>
// 2-逻辑层
import Header from "@/components/Header"
import List from "@/components/List"
export default {
name: "App",
data(){
return {
// 拿到localStorage的todos,把字符串转为对象
// 因为一开始todos是没有值的,为null,所以需要设置为空数组
todos:JSON.parse(localStorage.getItem("todos")) || [],
}
},
components:{
Header,
List,
},
methods:{
// 删除数据
deleteTodo(index){
this.todos.splice(index, 1)
},
// 修改数据
updataTodo(index){
this.todos[index].isOver=!this.todos[index].isOver
},
},
};
</script>
子组件
<template>
<div class="todo-footer">
<label>
<!-- v-model不一定要绑定data声明的数据 -->
<!-- 这里v-model绑定的是computed属性计算的值 -->
<input type="checkbox" v-model="checkAll"/>
</label>
<span> <span>已完成{{overNum}}</span> / 全部{{allNum}} </span>
<button class="btn btn-danger" @click="deleteA">清除已完成任务</button>
</div>
</template>
<script>
export default {
name:"Footer",
props:["todos","deleteTodo","updataTodo"],
methods:{
deleteA(){
this.deleteTodo()
}
},
computed:{
allNum(){
return this.todos.length;
},
overNum(){
// 第一种
// return this.todos.filter(item=>item.isOver).length
// 第二种
return this.todos.reduce((prev,item)=>{
if(item.isOver) prev+=1;
return prev
},0)
},
checkAll:{
get(){
// 满足 this.allNum===this.overNum 的情况下 并且 this.allNum>0
// 需要满足两个条件 才为true
return this.allNum===this.overNum && this.allNum>0
},
set(val){
// 一开始为false,点击按钮以后设置为true,依次更改
console.log(val)
this.updataAll(val)
}
}
}
};
</script>