vue3 TodoLists 父子组件传递
App.vue
<template>
<Header :/>
<List ：todos="todos" :addTodo="addTodo" />
<Footer ：todos="todos" ：checkAll =“checkAll ” :clearAllChecked =“clearAllChecked ”/>
</template>
import {defineComponent} from 'vue'
import { Todo } from '../types/todo.ts'
export defineComponent{
name:'App',
components:{
Header,
List,
Footer
},
setup(){
return{
//定义一个数组数据
const state = reactive<todos: Todo []>({
todos:[
{
id:1,title:'奔驰'，isCompleted:false
},
{
id:2,title:'宝马'，isCompleted:true
}，
{
id:3,title:'奥迪'，isCompleted:false
}
]
})
//添加TodoList数据
const addTodo =(Todo:Todo)=>{
const Todo = state.todos.unshift(Todo)
}
const checkAll = (isCompleted:boolean)=>{
state.todos.forEach((todo)=>{
todo.isCompleted = isCompleted
})
}
//清理所有选中数据
const clearAllChecked = ()=>{
state.todos = state.todos.filter((todo)=> !todo.isCompleted)
}
return{
...toRefs(state),
addTodo ，
checkAll
}
}
}
}
Footer.vue
<template>
<div>
<label>
<input type="checkbox" v-model="isCheckAll"/>
</label>
<span><span>已完成{{ count }}</span>/全部{{ todos.lenth}}</span>
<button @click="clearAllChecked ">清除已完成任务</button>
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import { Todo } from '../tyes/todo'
export default defineComponent ({
name:'Footer',
props:{
todos:{
type:Array as()=>Todo[],
required：true
}，
checkAll:{
type:Function,
required:true
}，
clearAllChecked ：{
type:Function,
required:true
}
},
setup(props){
const count = computed(()=>{
return props.todos.reduce((pre,todo,index)=> pre+(todo.isCompleted?1:0),0)
})
const isCheckAll = computed({
get(){
return count.value>0 && props.todos.length == count.vlaue
},
set(val){
props.checkAll(val)
}
})
},
return{
count
}
})
</script>
|