上次讲到了父子组件传值,这次讲下Vue中用eventBus实现兄弟组件传值。兄弟组件出现的情况通常是父组件下有多个子组件,子组件相互要传递值
。这里用的自己写的一个Todo List例子,在menu页下todoList组件点击完成事项后传递到finishList组件。

<>1. 创建eventBus.js

eventBus作为一个中央事件总线,用于监听todoList抛出的事件,并出发finishList的接收事件。
import Vue from 'vue' export default new Vue()
<>2. 在兄弟组件中引用eventBus,并加入$emit和on方法

TodoList:在methods中用$emit发送传递值。
// 这是todoList组件 <script> import eventBus from '@/eventBus' export default {
name: "TodoList", data () { return { todoList: [] } }, methods : { //传递完成事件给完成清单
handleFinish: function(index) { const eventFinished = this.todoList.splice(
index, 1)[0] eventBus.$emit('finishEvent', eventFinished) } }, } </script>
FinishList:在created中用$on接收传递值。
// 这是finishList组件 <script> import eventBus from '@/eventBus' export default {
name: "FinishList", data () { return { finishList: [] } }, created() {
//添加传递来的完成事件 eventBus.$on('finishEvent', eventFinished => { this.finishList.push
(eventFinished) }) } } </script>

技术
©2019-2020 Toolsou All rights reserved,
Android移动应用基础学习——第一章基础入门IDEA实现远程调试步骤详解通俗理解-梯度下降法(一)- 数学基础Java复习题-----稳了!!!如何防止Mac进入睡眠状态?告诉你4种有效的方法Arduino智能小车设计(一)自定义注解的方式的使用场景:解决业务分发vue 路由跳转四种方式 (带参数)二进制模2除法(CRC循环冗余检验)数组去重主要的5种方法,