vue3 Todo组件添加数据

App.vue

<template>
  <Header  :/>
  <List ：todos="todos" :addTodo="addTodo" />
  <Footer />
</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)
      }
      return{
        ...toRefs(state),
        addTodo 
      }
    }
 }
}

Header.vue

<template>
  <input type="text"  v-model="title" />
</template>
<script lang="ts">
  import {defineComponent}  from 'vue'
  export default defineComponent{
    name:'Header',
    props:{
      addTodo:{
        type:Function,
        required:true
      }
    },
    setup(props){
      const title = ref('')
      const add = ()=>{
        //判断输入框的数据是否为空
        const text = title.value
        if(!text.trim()) return
        const todo = {
          id:Date.now(),
          title:text,
          isCompleted:false
       }
       props.addTodo(todo)
      }
      return {
        title
      }
    }
 }
</script>