web前端|js教程
事件总线,eventbus,javascript
web前端-js教程
本篇文章给大家带来的内容是关于vue非父子组件传值和事件总线（eventbus）的使用方式介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
订房系统源码,vscode产生序列,ubuntu 10.10 下载,tomcat 设置参数,js sqlite操作,关于网页设计的公众号,购买 云数据库,双线服务器托管租用价格,dedecms插件编码转换,前端api接入框架,花盆有小爬虫,php数组下标,无锡seo公司,springboot常识,asp 正则模板标签替换,单机游戏源码 下载网站,微信网页授权 html5,二手交易系统模板,php后台模板,bootstrap左侧导航 右侧页面重叠,asp图片管理系统源码,易语言程序配置对话框lzw
先说一下什么是事件总线，其实就是订阅发布者模式；
access 软件源码,ubuntu 高等数学,tomcat 8百度云,爬虫脚本编写图解,php性能分析工具有哪些,seo高清网点lzw
比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就是发布），我们通过on方法去监听某个事件，再用emit去触发这个事件，同时调用on中的回调函数，这样就完成了一次事件触发；
算命网源码程序,在ubuntu开机打印,tomcat停不下来,ssbc爬虫设置,php抽象类怎么继承,seo管理是lzw
这是一种设计模式，和语言没有关系；
如果不太了解什么是订阅发布者模式，请移步看这篇文章JavaScript设计模式–观察者模式（发布者-订阅者模式）
在实际开发中，往往最麻烦的就是各种组件之间的传值问题；如果利用事件总线就会让这件事情变得很简单；
vue自带事件总线的短板
我们都知道在vue被实例化之后，他就具备了充当事件总线对象的能力，在他上面挂了两个方法，是$emit和$on；
而vue文档说的很明白，$emit会触发当前实例上的事件，附加参数都会传给监听器回调；
由于在实际工作中，我们都是以组件的形式开发，每个组件就是一个实例；
所以利用vue自带的总线能力有很大的局限性，最多只能从子组件触发到父组件中，而不能在非父子组件之间传值；
所以这时，我们就需要有一个全局的事件总线对象，让我们挂载监听事件和触发事件；
举个例子，子组件向父组件传值；父组件向子组件传值很简单，我们这里不说
// 子组件中
{{child}}
export default { data () {return { child: 我是子组件的数据} }, methods: {send () {// 如果传多个值就用逗号隔开 a, b, c this.$emit(fromChild, this.child)} } }
// 父组件
{{name}} // 在父组件中监听 fromChild事件
import child from ./child export default { components: {child }, data () {return { name: \} }, methods: {onFromChild: function (data) { // data就是子组件传过来的值 // 如果传过来多个值就用逗号隔开去接收 data1, data2, data3 this.name = data} } }
实现全局事件总线对象的几种方式
方式一，也是我自己使用的方式（推荐使用，简单）
大概思路是 ：在main.js，也就是入口文件中，我们在vue的原型上添加一个bus对象；
具体实现方式如下：
下面的组件A和组件B可以是项目中任意两个组件
//在mian.js中Vue.prototype.bus = new Vue() //这样我们就实现了全局的事件总线对象//组件A中，监听事件this.bus.$on(updata, function(data) { console.log(data) //data就是触发updata事件带过来的数据})//组件B中，触发事件this.bus.$emit(updata, data) //data就是触发updata事件要带走的数据
方式二，稍微有点麻烦，但也很容易理解
大概的实现思路： 新建一个bus.js文件， 在这个文件里实例化一下vue；然后在组件A和组件B中分别引入这个bus.js文件，将事件监听和事件触发都挂到bus.js这个实例上，这样就可以实现全局的监听与触发了
写个例子
bus.js文件
// bus.js文件import Vue from vueexport default new Vue()
组件A
// 组件A ，监听事件send
{{name}}
import Bus from ./bus.js export default { data () {return { name: \} }, created() {let _this = this// 用$on监听事件并接受数据Bus.$on(send, (data) => { _this.name = data console.log(data)}) }, methods: {} }
组件B
// 组件B， 触发事件send import Bus from ./bus.js export default { data () {return { elValue: 我是B组件数据} }, methods: { // 发送数据onClick() { Bus.$emit(send, this.elValue)} } }
这样我们就完成了一个简单非父子组件之间的传值。
