创建一个vue应用程序，包含以下组件 TodoList组件：作为父组件，管理待办事项的状态和逻辑。 TodoInput组件：用于输入新的待办事项。使用组件嵌套和组件之间的传值来实现这个待办事项列表。

创建一个 Vue 应用程序包含 TodoList 和 TodoInput 组件，可以按照以下步骤进行：

1. **初始化项目**:
使用 `vue create your-project-name` 命令来初始化一个新的 Vue 项目。

2. **结构设计**:
- 在 `src/components` 目录下创建两个文件夹，分别叫做 `TodoList` 和 `TodoInput`。然后，在每个文件夹里分别创建 `.js` 或者 `.vue` 文件（如 `TodoList.vue` 和 `TodoInput.vue`）。

3. **TodoList组件**:

   <!-- TodoList.vue -->
   <template>
     <div>
       <h1>待办事项列表</h1>
       <ul ref="todoList">
         <li v-for="(item, index) in todos" :key="index">
           {{ item.text }}
           <!-- 使用道具传递删除操作到父组件 -->
           <button @click="deleteTodo(index)">删除</button>
         </li>
       </ul>
       <!-- 显示添加新项的表单 -->
       <TodoInput v-if="showAddForm" :on-add="addTodo"/>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         todos: [],
         showAddForm: false,
       };
     },
     methods: {
       addTodo(text) {
         this.todos.push({ text });
         this.showAddForm = false;
       },
       deleteTodo(index) {
         this.todos.splice(index, 1);
       },
     },
     // 使用自定义事件（v-on:input）监听TodoInput的变化并更新状态
     components: { TodoInput },
   };
   </script>

4. **TodoInput组件**:

   <!-- TodoInput.vue -->
   <template>
     <transition name="fade">
       <form @submit.prevent="submit">
         <input type="text" v-model="newTodoText" placeholder="添加待办事项...">
         <button type="submit">添加</button>
       </form>
     </transition>
   </template>

   <script>
   export default {
     props: ['on-add'],
     data() {
       return {
         newTodoText: '',
       };
     },
     methods: {
       submit() {
         if (this.newTodoText.trim()) {
           this.on-add(this.newTodoText);
         }
         this.newTodoText = '';
       },
     },
   };
   </script>

5. **主组件（App.vue）**:
在 App.vue 中引入并使用这两个组件，并实例化 TodoList 组件：

   <template>
     <div id="app">
       <TodoList/>
     </div>
   </template>

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

   export default {
     components: {
       TodoList,
       TodoInput,
     },
   };
   </script>

6. **CSS样式和过渡效果**:
如果需要，可以在全局 CSS 或者对应的组件内添加样式，以及为组件间过渡效果设置 CSS 。

现在你已经创建了一个基本的 Vue 应用，其中 TodoList 管理待办事项，TodoInput 允许用户输入新的任务。通过数据绑定和事件驱动，它们之间实现了通信。