Vue事件总线,eventBus使用

本文介绍了一种Vue应用中实现组件间通信的方法:通过创建并利用Event Bus。此方案适用于多种场景,包括兄弟组件间的传值、爷孙组件间的传值等。文章详细展示了如何设置与使用Event Bus来有效地在不同组件间传递数据。

使用目的

实现组件之内的通信,也就是传递数据

适用范围

兄弟组件传值、爷孙组件传值、封装组件的时候要所有被调用的这个组件同时响应实现一些功能的时候

使用范例

新建js文件 eventBus.js
内容为一个vue实例

import Vue from 'vue'
export default new Vue()

如果全局调用的话,在main.js里面

import eventBus from './util/eventBus'
Vue.prototype.$bus = eventBus

局部调用的话,直接在调用的组件内引入这个文件

import bus from './../../util/eventBus.js'

使用方法为,传递处

this.$bus.$emit('mapId', this.mapId)

这里向全局传递了一个名为mapId的数据,他的内容是this.mapId

在使用处接收即可,target就是传递而来的this.mapId的内容

this.$bus.$on('mapId', target=>{
	console.log(target)
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值