使用目的
实现组件之内的通信,也就是传递数据
适用范围
兄弟组件传值、爷孙组件传值、封装组件的时候要所有被调用的这个组件同时响应实现一些功能的时候
使用范例
新建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)
})
本文介绍了一种Vue应用中实现组件间通信的方法:通过创建并利用Event Bus。此方案适用于多种场景,包括兄弟组件间的传值、爷孙组件间的传值等。文章详细展示了如何设置与使用Event Bus来有效地在不同组件间传递数据。
1173

被折叠的 条评论
为什么被折叠?



