实践

如何将事件进行全局响应?

通过引入events 包进行全局事件响应

全局事件响应的好处

可处理深层次组件传值,以及兄弟组件传值等

兄弟组件传参

bus文件:

需创建个文件夹形式,存放实例化的事件总线,再进行导出,精简代码,减少冗余

App组件:

在当前App组件中,引入当前Header 组件和Menu组件使其成为兄弟

header组件:

引入eventBus ,通过内置的emit函数传递方法及变量。
eventBus.emit('handleNav',item)
emit函数,第一个参数为当前传递事件名称,除了第一个参数外,后面可进行多个参数传递

Menu组件:

eventBus.addListener('handleNav',this.getHeadInfo.bind(this))通过addListener监听当前函数事件获取事件内部参数,回调getHeadInfo方法,通过绑定外部this,实现改变内部状态
引入eventBus ,通过内置的addListener内置方法通过传递的事件名称获取当前事件内部的参数从而实现改变内部状态

运行后呈现

notion image
image.png
notion image
image.png
notion image
作者:弦生_a3a3
链接:https://www.jianshu.com/p/6e46ea788964
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
Loading...
目录
文章列表
王小扬博客
产品
Think
Git
软件开发
计算机网络
CI
DB
设计
缓存
Docker
Node
操作系统
Java
大前端
Nestjs
其他
PHP