vue非父子组件传值和事件总线(eventbus)的使用方法是什么 - 行业资讯

　　介绍

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

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

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

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

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

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

<强> vue自带事件总线的短板

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

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

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

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

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

<编辑>举个例子,子组件向父组件传值;父组件向子组件传值很简单,我们这里不说 //子组件中　　& lt; template> 　　& lt; div> 　　& lt; span>{{孩子}}& lt;/span> 　　& lt;输入类型=癰utton"值=https://www.yisu.com/zixun/钡慊鞔シⅰ癅click=胺⑺汀? 　　

　　　　<脚本> 　　出口默认{ 　　数据(){ 　　返回{ 　　孩子:“我是子组件的数据的　　｝　　}，　　方法:{ 　　send () {//如果传多个值就用逗号隔开a, b, c 　　这一点。发出(fromChild, this.child)美元　　｝　　｝　　｝　　 //父组件　　& lt; template> 　　& lt; div> 　　& lt; span>{{名称}}& lt;/span>//在父组件中监听fromChild事件　　& lt;孩子@fromChild=皁nFromChild"祝辞& lt;/child> 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　从& # 39;进口孩子。/孩子# 39; 　　出口默认{ 　　组件:{ 　　孩子　　}，　　数据(){ 　　返回{ 　　名称:& # 39;& # 39; 　　｝　　}，　　方法:{>//在mian.js中　　Vue.prototype。总线=new Vue()//这样我们就实现了全局的事件总线对象//组件中,监听事件　　this.bus。美元(& # 39;updata& # 39;,功能(数据){ 　　console.log(数据)//数据就是触发updata事件带过来的数据　　}）//组件B中,触发事件　　this.bus。美元发出(& # 39;updata& # 39;,数据)//数据就是触发updata事件要带走的数据

方式二,稍微有点麻烦,但也很容易理解

大概的实现思路:新建一个公共汽车。js文件,在这个文件里实例化一下vue,然后在组件和一组件B中分别引入这个bus.js文件,将事件监听和事件触发都挂到bus.js这个实例上,这样就可以实现全局的监听与触发了

<编辑>写个例子 <编辑>公共汽车。js文件 //bus.js文件　　从& # 39;进口Vue Vue # 39; 　　出口默认新Vue () <编辑>组件一个 //组件,监听事件发送　　& lt; template> 　　& lt; div> 　　& lt; span>{{名称}}& lt;/span> 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　进口汽车& # 39;。/bus.js& # 39; 　　出口默认{ 　　数据(){ 　　返回{ 　　名称:& # 39;& # 39; 　　｝　　}，　　创建(){ 　　让_this=这//用美元在监听事件并接受数据　　公共汽车。美元(& # 39;发送# 39;,(数据)=比;{ 　　_this.name=数据　　console.log(数据) 　　}）　　}，　　方法:{} 　　｝　　& lt;/script>

<强>组件B

//组件B,触发事件发送　　& lt; template> 　　& lt; div> 　　& lt;输入类型=癰utton"值=https://www.yisu.com/zixun/钡慊鞔シⅰ癅click=" onClick "> 　　