公司在兰州要做网站怎样选择,互联网营销推广服务商,三星网上商城怎么退货,开鲁网站seo不用下载文章目录 一、事件总线二、什么是事件总线三、触发事件1、监听事件2、只监听一次3、移除监听4、触发事件注意事项5、代码示例6、注意事项 一、事件总线
除了父子组件传参之外#xff0c;兄弟组件之间共享信息也是我们经常会遇到的。如果遇到这类问题#xff0c;我们现在可以… 文章目录 一、事件总线二、什么是事件总线三、触发事件1、监听事件2、只监听一次3、移除监听4、触发事件注意事项5、代码示例6、注意事项 一、事件总线
除了父子组件传参之外兄弟组件之间共享信息也是我们经常会遇到的。如果遇到这类问题我们现在可以借助vuex或者把数据统一放在他们父组件中处理。这两种方式都可以解决兄弟组件传递信息的问题。我们今天要介绍的是另一种方式-事件总线事件总线也是我们开发过程中经常会用到的一种开发模式。
二、什么是事件总线
事件总线可以作为组件沟通的桥梁就像是所有组件共用相同的事件中心可以向该中心注册发送事件或接收事件所以组件都可以上下平行地通知其他组件但也就是太方便所以若使用不慎就会造成难以维护的灾难因此才需要更完善的Vuex作为状态管理中心将通知的概念上升到共享状态层次。
三、触发事件
在uni中可以通过uni.$emit(eventName,OBJECT)来触发全局的自定事件。附加参数都会传给监听器回调。 代码示例
uni.$emit(update,{msg:页面更新})1、监听事件
uni.$on(eventName,callback) 监听全局的自定义事件。事件可以由 uni.$emit 触发回调函数会接收所有传入事件触发函数的额外参数。 代码示例
uni.$on(update,function(data){console.log(监听到事件来自 update 携带参数 msg 为 data.msg);
})2、只监听一次
uni.$once(eventName,callback) 监听全局的自定义事件。事件可以由 uni.$emit 触发但是只触发一次在第一次触发之后移除监听器。 代码示例 uni.$once(update,function(data){console.log(监听到事件来自 update 携带参数 msg 为 data.msg);})3、移除监听
uni.$off([eventName, callback]) 移除全局自定义事件监听器
4、触发事件注意事项
如果没有提供参数则移除所有的事件监听器如果只提供了事件则移除该事件所有的监听器如果同时提供了事件与回调则只移除这个回调的监听器提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器
5、代码示例
$emit、$on、$off常用于跨页面、跨组件通讯这里为了方便演示放在同一个页面
templateview classcontentview classdatatext{{val}}/text/viewbutton typeprimary clickcomunicationOff结束监听/button/view/templatescriptexport default {data() {return {val: 0}},onLoad() {setInterval((){uni.$emit(add, {data: 2})},1000)uni.$on(add, this.add)},methods: {comunicationOff() {uni.$off(add, this.add)},add(e) {this.val e.data}}}/scriptstyle.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.data {text-align: center;line-height: 40px;margin-top: 40px;}button {width: 200px;margin: 20px 0;}/style6、注意事项
uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的跨任意组件页面nvuevue 等使用时注意及时销毁事件监听比如页面 onLoad 里边 uni.$on 注册监听onUnload 里边 uni.$off 移除或者一次性的事件直接使用 uni.$once 监听在vue中也可以通过EventBus(事件总线)的方式进行兄弟组件的传值
