vue非父子组件传值和事件总线(eventbus)的使用方法是什么-创新互联

这篇文章给大家分享的是有关vue非父子组件传值和事件总线(eventbus)的使用方法是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

成都创新互联专注于隆德网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供隆德营销型网站建设,隆德网站制作、隆德网页设计、隆德网站官网定制、成都微信小程序服务,打造隆德网络公司原创品牌,更为您提供隆德网站排名全网营销落地服务。

先说一下什么是事件总线,其实就是订阅发布者模式;

比如有一个bus对象,这个对象上有两个方法,一个是on(监听,也就是订阅),一个是emit(触发,也就是发布),我们通过on方法去监听某个事件,再用emit去触发这个事件,同时调用on中的回调函数,这样就完成了一次事件触发;

这是一种设计模式,和语言没有关系;

如果不太了解什么是订阅发布者模式,请移步看这篇文章JavaScript设计模式--观察者模式(发布者-订阅者模式)

在实际开发中,往往最麻烦的就是各种组件之间的传值问题;如果利用事件总线就会让这件事情变得很简单;

vue自带事件总线的短板

我们都知道在vue被实例化之后,他就具备了充当事件总线对象的能力,在他上面挂了两个方法,是$emit和$on;

而vue文档说的很明白,$emit会触发当前实例上的事件,附加参数都会传给监听器回调;

由于在实际工作中,我们都是以组件的形式开发,每个组件就是一个实例;

所以利用vue自带的总线能力有很大的局限性,最多只能从子组件触发到父组件中,而不能在非父子组件之间传值;

所以这时,我们就需要有一个全局的事件总线对象,让我们挂载监听事件和触发事件;

举个例子,子组件向父组件传值;父组件向子组件传值很简单,我们这里不说
// 子组件中

// 父组件

实现全局事件总线对象的几种方式

方式一,也是我自己使用的方式(推荐使用,简单)

大概思路是 :在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 'vue'
export default new Vue()
组件A
// 组件A ,监听事件send

组件B

// 组件B, 触发事件send

这样我们就完成了一个简单非父子组件之间的传值。

感谢各位的阅读!关于vue非父子组件传值和事件总线(eventbus)的使用方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网站题目:vue非父子组件传值和事件总线(eventbus)的使用方法是什么-创新互联
文章起源:http://scyanting.com/article/dchehs.html