在AddUpdate组件中，使用v-model将其输入与父组件绑定，然后使用parent（currentItem）中的绑定值来更新/添加todo，然后通过访问DOM重置它。我重构了您的代码以仅使用复合API：

<template>
  <div id="app">
    <ErrorMessage
      v-if="!isValid"
      message="The todo body has to be at least 3 characters long"
    />

    <SuccessMessage v-if="allDone" message="You can relex! :)" />

    <div class="card">
      <Header />
      <List
        :todos="todos"
        @delete-todo="deleteTodo"
        @edit-todo="editTodo"
        @toggle-todo="toggleTodo"
      />
      <AddUpdateTodo @add-update-todo="AddUpdateTodo" v-model="currentItem" />
      {{ currentItem }}
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import ErrorMessage from './components/ErrorMessage.vue';
import SuccessMessage from './components/SuccessMessage.vue';
import Header from './components/Header.vue';
import List from './components/List.vue';
import AddUpdateTodo from './components/AddUpdate.vue';

export default {
  name: 'App',
  components: {
    ErrorMessage,
    SuccessMessage,
    Header,
    List,
    AddUpdateTodo,
  },

  setup() {
    const todos = ref([]);
    const currentItem = ref(null);
    const isValid = ref(true);
    const isUpdate = ref(false);
    const updateAtIndex = ref(-1);

    const allDone = computed(
      () => todos.value.length && todos.value.every((todo) => todo.done)
    );

    const toggleTodo = (index) => {
      todos.value[index].done = !todos.value[index].done;
    };

    const deleteTodo = (index) => {
      if (confirm('Are you sure?')) {
        todos.value.splice(index, 1);
      }
    };

    const editTodo = (index) => {
      isUpdate.value = true;
      updateAtIndex.value = index;
      currentItem.value = todos.value[index].text;
    };

    const AddUpdateTodo = () => {
      let newTodo = {
        done: false,
        text: '',
      };
      const text = currentItem.value;

      if (text && text.length > 2) {
        isValid.value = true;
        if (!isUpdate.value) {
          newTodo.text = text;
          todos.value.push(newTodo);
        } else {
          todos.value[updateAtIndex.value].text = text;
          isUpdate.value = false;
        }
        currentItem.value = '';
      } else {
        isValid.value = false;
      }
    };

    return {
      todos,
      isValid,
      isUpdate,
      allDone,
      toggleTodo,
      deleteTodo,
      editTodo,
      AddUpdateTodo,
      currentItem,
    };
  },
};
</script>

字符串
AddUpdate：

<template>
  <form
    class="card-footer"
    @submit.prevent="$emit('add-update-todo')"
    autocomplete="off"
  >
    <input id="toDoText" type="text" placeholder="Add todo" v-model="text" />
    <button type="submit">Ok</button>
  </form>
</template>

<script>
import { ref, onMounted, watch, computed } from 'vue';
export default {
  name: 'AddUpdateTodo',
  props: ['modelValue'],
  setup(props, { emit }) {
    const text = computed({
      get() {
        return props.modelValue;
      },
      set(value) {
        emit('update:modelValue', value);
      },
    });
    return { text };
  },
};
</script>

型
LIVE DEMO