用ts写一个vue3 todolist 父子组件的简单案例

以下是一个使用Vue3和TypeScript编写的简单的TodoList应用程序，包含父子组件：

TodoList组件：

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" placeholder="Add a new todo">
    <button @click="addTodo">Add</button>
    <ul>
      <todo-item v-for="(todo, index) in todos" :key="index" :todo="todo" @remove-todo="removeTodo"></todo-item>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import TodoItem from './TodoItem.vue'

export default defineComponent({
  name: 'TodoList',
  components: {
    TodoItem
  },
  setup() {
    const todos = ref<string[]>([])
    const newTodo = ref<string>('')

    const addTodo = () => {
      if (newTodo.value) {
        todos.value.push(newTodo.value)
        newTodo.value = ''
      }
    }

    const removeTodo = (todo: string) => {
      const index = todos.value.indexOf(todo)
      if (index !== -1) {
        todos.value.splice(index, 1)
      }
    }

    return {
      todos,
      newTodo,
      addTodo,
      removeTodo
    }
  }
})
</script>

TodoItem组件：

<template>
  <li>
    {{ todo }}
    <button @click="removeTodo">Remove</button>
  </li>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'TodoItem',
  props: {
    todo: {
      type: String as PropType<string>,
      required: true
    }
  },
  emits: ['remove-todo'],
  setup(props, { emit }) {
    const removeTodo = () => {
      emit('remove-todo', props.todo)
    }

    return {
      removeTodo
    }
  }
})
</script>

使用：

<template>
  <TodoList />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TodoList from './TodoList.vue'

export default defineComponent({
  name: 'App',
  components: {
    TodoList
  }
})
</script>
``