在Uni中使用Vue的EventBus总线机制操作

首先我们要使用的EventBus事件总线，能够做到兄弟组件，或者不是父子关系的页面达到数据相互传递的效果

一种做法是在main.js中创建事件总线

创建完$EventBus后，就可以直接在页面中使用事件总线的方法来发送和接收事件了

第二种做法：封装事件总线

使用的时候直接引入就可以了

补充知识：vue里使用EventBus解决兄弟组件间的传递信息

①初始化

import Vue from 'vue'

export const EventBus = new Vue();

②在需要的调用其他组件的页面：

EventBus.$emit ( '自定义函数', 传参 );

③被调用的页面：

EventBus.$on ( '自定义函数', (接收参数) => {
 执行你需要执行方法
}

④总结

EventBus的使用场景像是一种广播，当我们向EventBus发送一个事件，则该事件将会传递给多个该事件的订阅者。

1.解耦合(轻松的实现系统间解耦)

2.高性能可扩展（每一个事件都是简单独立且不可更改的对象，只需要保存新增的事件，不涉及其他的变更删除操作）

3.系统审计（每一个事件都是不可变更的，每一个事件都是可追溯的）

以上这篇在Uni中使用Vue的EventBus总线机制操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 组件之间事件触发($emit)与event Bus($on)的用法说明

    组件之间事件触发 之前使用组件,并不是很频繁,是水平的问题,目前工作中,公司大佬带着我手写过一个组件,再此很感谢他的指导.目前简单的组件已经有了自己的逻辑思维,正在从低级码农向中级码农蜕变.废话不多说.上图看看组件情况. 新增按钮组件: 操作按钮组合组件: 此时有个需求就是,无论是哪个按钮,如果改变了列表中的数据,列表需要实时更新数据. 此时就需要用到组件间的事件触发. 父子组件之间事件触发可以使用$emit $emit的使用方法如下: 在子组件中,写一个click点击事件.比如: cancel

  • 详解vue或uni-app的跨域问题解决方案

    常见解决方案有两种 服务器端解决方案 服务器告诉浏览器:你允许我跨域 具体如何告诉浏览器,请看: // 告诉浏览器,只允许 http://bb.aaa.com:9000 这个源请求服务器 $response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000'); // 告诉浏览器,请求头里只允许有这些内容 $response->header('Access-Control-Allow-Headers', 'Author

  • Vue组件间数据传递的方式(3种)

    vue中传递数据的方式有哪些 数据流的方式传递数据 通过 props 传递属性 父级给demo2组件绑定一个msg数据 父组件 <template> <div class='container'> <demo2 :msg="msg" @change="change" /> </div> </template> <script> import demo2 from './demo2' export

  • 在Uni中使用Vue的EventBus总线机制操作

    首先我们要使用的EventBus事件总线,能够做到兄弟组件,或者不是父子关系的页面达到数据相互传递的效果 一种做法是在main.js中创建事件总线 创建完$EventBus后,就可以直接在页面中使用事件总线的方法来发送和接收事件了 第二种做法:封装事件总线 使用的时候直接引入就可以了 补充知识:vue里使用EventBus解决兄弟组件间的传递信息 ①初始化 import Vue from 'vue' export const EventBus = new Vue(); ②在需要的调用其他组件的页

  • vue中的总线机制(EventBus)解析

    目录 一.EventBus的简介 二.使用方法 第一步:2种方式初始化 第二步:发送事件 第三步:接受事件 第四步:移除事件 三.全局EventBus 1.注册,在main.js中 2.在组件中使用 四.EventBus的优缺点 一.EventBus的简介 EventBus 又称时间总线 ,理解上来讲 EventBus 机制是通知的概念,EventBus作为所有组件共享的事件中心,既可以发送事件也可以接受事件,所有组件都可以平行的接到到相对应的数据. 二.使用方法 第一步:2种方式初始化 在项目

  • 解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不多的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据.检查bus的配置以及调用方法,均没有出错,错就错在没有理解Vue的生命周期!!! 我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据.因此,我通过两个页面来了解路由跳转时两个页面的生命周期,下面给出其中一个页面的部分代码: //页面1 beforeCreate () {

  • vue 使用eventBus实现同级组件的通讯

    新创建一个vue实例用于调度事件的绑定和发送 可以做到同级组件相互通讯,传递参数,点击第一个组件会修改第二个组件的label值,点击第二个组件会修改第二个组件的label值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="vue.js"></script> </hea

  • vue采用EventBus实现跨组件通信及注意事项小结

    vue采用EventBus实现跨组件通信及注意事项小结

    EventBus EventBus是一种发布/订阅事件设计模式的实践. 在vue中适用于跨组件简单通信,不适应用于复杂场景多组件高频率通信,类似购物车等场景状态管理建议采用vuex. 挂载EventBus到vue.prototype 添加bus.js文件 //src/service/bus.js export default (Vue) => { const eventHub = new Vue() Vue.prototype.$bus = { /** * @param {any} event

  • vue总线机制(bus)知识点详解

    vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同. bus适合小项目.数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了.bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件. vuex适用中大型项目.数据在多组件之间公用的情况. 简单介绍两者的区别之后,就要介绍下我在一个项目中遇到的一个场景了,这个场景使用bus可能更加适合些: //

  • vue之bus总线简单使用讲解

    vue之bus总线的简单使用 场景描述: A组件中包括B,C组件,而B组件中包括D组件,这时如果D组件想要在A组件中触发C组件的方法怎么办呢? 当然方案是有的,用状态管理vuex可以,用$emit传递也可以,但是我想试着用的是bus总线的方式: 如下: D组件中触发bus的emit ,然后在A组件中用bus总线的on来触发方法: D组件中 dataLoad(){ console.log('加载完触发事件'); this.$bus.$emit('itemDataLoad') // this.$bu

  • Vue全局事件总线和订阅与发布使用案例分析讲解

    Vue全局事件总线和订阅与发布使用案例分析讲解

    目录 一.全局事件总线 作用 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 二.订阅与发布 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 一.全局事件总线 作用 一种组件间通信的方式 适用于任意组件间通信. 安装 安装全局事件总线:在入口文件main.js中,给VM添加$bus,任意组件都可以在原型中调用. new Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus = t

  • Vue全局事件总线$bus安装与应用小结

    Vue全局事件总线$bus安装与应用小结

    目录 1.什么是全局事件总线 2.安装 3.使用 4.销毁 完整版示例: 1.什么是全局事件总线 一种组件间通信的方式,适用于任意组件间通信. 2.安装 在main.js里安装全局事件总线: new Vue({ ...... beforeCreate(){ //安装全局事件总线,$bus就是当前应用的vm Vue.prototype.$bus=this } ...... }) 3.使用 使用全局事件总线: 1.接收数据:A组件想接收数据,则要在A组件中给$bus绑定自定义事件,事件的回调留在A组

  • vue之bus总线的简单使用解读

    目录 vue bus总线的使用 场景描述 如下所示 bus总线的原理解析 1.怎么理解bus总线 2.bus组件存在的条件和注册 3.使用 总结 vue bus总线的使用 场景描述 A组件中包括B,C组件,而B组件中包括D组件,这时如果D组件想要在A组件中触发C组件的方法怎么办呢? 当然方案是有的,用状态管理vuex可以,用$emit传递也可以,但是我想试着用的是bus总线的方式: 如下所示 D组件中触发bus的emit ,然后在A组件中用bus总线的on来触发方法: D组件中 dataLoad

随机推荐