Vue.js TodoList案例实战：props父子通信与全局总线

资源摘要信息:"在本资源中，我们将介绍如何使用Vue.js框架实现一个TodoList案例。具体知识点包括使用props实现父子组件之间的数据传递、使用自定义事件实现子组件向父组件传递数据、以及使用全局总线实现兄弟组件之间的通信。" 在Vue.js中，组件是构建应用的基础单元，而组件间的数据传递和通信是构建复杂交互式应用的关键。Vue.js通过props、自定义事件和全局总线等机制来实现组件间的数据通信。 1. 使用props 父组件给子组件传数据 Props 是 Vue 中组件间通讯的主要方式之一，父组件通过props将数据传递给子组件。在使用props时，父组件需要在子组件标签上绑定数据，而子组件则通过props选项声明需要从父组件接收的数据。 在TodoList案例中，我们可能需要将一个待办项列表从父组件传递给子组件，子组件将这个列表渲染成具体的待办项。父组件传递的props可以是数组形式的待办项列表，子组件则需要在props选项中声明接收这个数组，并在组件内部使用它来渲染视图。 示例代码如下： 父组件： ```html <template> <div> <todo-item :todo-items="todoList"></todo-item> </div> </template> <script> import TodoItem from './TodoItem.vue'; export default { components: { TodoItem }, data() { return { todoList: ['学习Vue.js', '完成TodoList项目'] } } } </script> ``` 子组件： ```html <template> <ul> <li v-for="item in todoItems" :key="item.id">{{ item.text }}</li> </ul> </template> <script> export default { props: ['todoItems'] } </script> ``` 2. 使用自定义事件，子组件给父组件传数据 虽然props用于父向子传值非常方便，但在某些场景下，子组件需要向父组件反馈信息，这时就需要使用自定义事件。在Vue.js中，子组件可以使用`$emit`方法发射一个自定义事件，并将需要传递给父组件的数据作为参数。 例如在TodoList中，添加一个新的待办项时，子组件检测到这一操作后，可能会通过自定义事件通知父组件添加一个新的待办项到列表中。 示例代码如下： 子组件： ```html <template> <div> <input type="text" v-model="newTodo" @keyup.enter="addTodo"> </div> </template> <script> export default { data() { return { newTodo: '' } }, methods: { addTodo() { if (this.newTodo.trim()) { this.$emit('add-new-item', this.newTodo); this.newTodo = ''; } } } } </script> ``` 父组件： ```html <template> <div> <todo-input @add-new-item="handleAddItem"></todo-input> </div> </template> <script> import TodoInput from './TodoInput.vue'; export default { components: { TodoInput }, methods: { handleAddItem(newItem) { // 新增待办项的逻辑 } } } </script> ``` 3. 使用全局总线实现，兄弟组件的通信 在兄弟组件间通信时，可以使用Vue的全局事件总线（Event Bus）来实现。事件总线允许不同组件间无需显式引用即可相互通信。首先，需要在全局范围内创建一个新的Vue实例作为事件总线，然后在需要通信的兄弟组件中通过这个总线发射或监听事件。 在TodoList案例中，如果两个子组件需要共享某些数据，比如一个计数器组件和一个待办项列表组件，可以通过全局总线来实现它们之间的通信。 示例代码如下： 创建事件总线： ```javascript // event-bus.js import Vue from 'vue'; export const EventBus = new Vue(); ``` 兄弟组件A： ```html <template> <div> <button @click="sendEvent">发送事件</button> </div> </template> <script> import { EventBus } from './event-bus.js'; export default { methods: { sendEvent() { EventBus.$emit('share-data', '需要共享的数据'); } } } </script> ``` 兄弟组件B： ```html <template> <div> <!-- 显示接收到的数据 --> <p>{{ sharedData }}</p> </div> </template> <script> import { EventBus } from './event-bus.js'; export default { data() { return { sharedData: '' } }, created() { EventBus.$on('share-data', (data) => { this.sharedData = data; }); } } </script> ``` 以上就是实现Vue.js框架下TodoList案例中父子组件间数据传递、子组件向父组件传递数据以及兄弟组件间通信的核心知识。通过props、自定义事件和事件总线，开发者可以在Vue应用中灵活地组织和管理组件间的通信，构建高效的应用架构。