一个输入框Demo带你理解vue3新特性【组件抽离版本】

<TodoItem

v-for=“todo in filtedTodos”

:key=“todo.id”

:todo=“todo”

v-model:edited-todo=“editedTodo”

@remove-todo=“removeTodo”

2、EditTodo.vue

<input

type=“text”

:value=“todoTitle”

@input=“onInputChange”

v-bind=“$attrs”

/>

3、TodoItem.vue

• <label @dblclick=“editTodo(todo)”>{{ todo.title }}

  <button @click=“removeTodo(todo)”>X

  <EditTodo

  class=“edit”

  v-model:todo-title=“todo.title”

  v-todo-focus=“todo === editedTodo”

  @blur=“doneEdit(todo)”

  @keyup.enter=“doneEdit(todo)”

  @keyup.escape=“cancelEdit(todo)”