vue中将输入框组件化，通过事件将数据提交给父组件，实现追加代办项到待办清单中

在Vue.js中，为了将输入框组件化并实现在父组件中追加待办事项的功能，你可以按照以下步骤操作：

1. **创建组件**:
- 创建一个名为`TodoInput`的自定义组件，它通常包含一个`v-model`绑定的`input`元素用于接收用户输入，以及一个`@input`事件处理器，当用户停止编辑时触发。

   <!-- TodoInput.vue -->
   <template>
     <div>
       <input v-model="item" @input="handleInputChange">
       <button @click="addTodo">添加</button>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         item: ''
       }
     },
     methods: {
       handleInputChange(e) {
         // 当输入改变时，更新待办事项内容
         this.item = e.target.value;
       },
       addTodo() {
         // 当添加按钮点击，向父组件发送事件
         this.$emit('addTodo', this.item);
         // 清空输入框
         this.item = '';
       }
     }
   }
   </script>

2. **在父组件中使用组件**:
- 父组件需要有一个数组来存储待办事项，并监听`addTodo`事件来处理新增任务。

   <!-- ParentComponent.vue -->
   <template>
     <div>
       <todo-input :on-add-todo="addItem"></todo-input>
       <ul>
         <li v-for="(item, index) in todos" :key="index">{{ item }}</li>
       </ul>
     </div>
   </template>

   <script>
   import TodoInput from './TodoInput.vue';

   export default {
     components: { TodoInput },
     data() {
       return {
         todos: []
       };
     },
     methods: {
       addItem(item) {
         // 接收子组件传递的数据，追加到数组中
         this.todos.push(item);
       }
     }
   }
   </script>

这样，每次用户在`TodoInput`组件中输入待办事项并点击添加，都会通过事件机制将新的任务添加到父组件的`todos`数组中。