vue组件中传值EventBus的使用及注意事项说明


Posted in Javascript onNovember 16, 2020

主要想说下非父子组件之间的通信。

项目场景:

在app.vue里写了一个公共的顶部导航navbar,然后右侧有个分享按钮,而这个分享按钮只有在特定的页面才展示,项目里是在lottery.vue页面,然后想实现app.vue里点击分享按钮,触发lottery.vue里的分享方法。

解决:使用eventBus

1、创建一个event-bus.js

import Vue from 'vue'

export const EventBus = new Vue()

2、在app.vue引入eventbus,点击分享按钮时触发方法

import { EventBus } from '@/tools/event-bus'
 
onClickRight () {
  EventBus.$emit('handleLotteryShare')
}

3、在lottery.vue引入eventBus,在mounted里监听

import { EventBus } from '@/tools/event-bus'
 
mounted () {
  EventBus.$on('handleLotteryShare', () => {
   this.doShare()
  })
 },

4、到此解决了。但是,但是,出bug了,每多点击一次,分享的弹窗的蒙层颜色就更深一层。然后一头雾水,以为是原生app里api的bug,跑去问他们,结果尴尬了,并不是,而是调了多次分享接口。

然后就发现应该跟eventBus有关,上网搜索了下,原来eventBus用完要记得解绑。加上以下代码解决了。

created () {
  // 解绑bus
  EventBus.$off('handleLotteryShare')
}

使用eventBus注意事项:要记得解绑啊!EventBus.$off('handleLotteryShare')。

补充知识:vue前端兄弟组件或任意两个组件之间进行传值可以使用eventbus

具体使用流程如下:

1、定义一个js文件,引入Vue

vue组件中传值EventBus的使用及注意事项说明

2、在需要使用eventbus的组件中引入步骤1创建的js文件

vue组件中传值EventBus的使用及注意事项说明

bus.$emit进行传值

vue组件中传值EventBus的使用及注意事项说明

3、在另一个组件中使用bus.$on进行接收

vue组件中传值EventBus的使用及注意事项说明

其中,msg即为步骤2中emit携带的参数“123”

以上这篇vue组件中传值EventBus的使用及注意事项说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.compatMode介绍
May 21 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
小程序自定义弹框效果
Nov 16 #Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 #Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 #Javascript
小程序实现上下切换位置
Nov 16 #Javascript
小程序实现点击tab切换左右滑动
Nov 16 #Javascript
微信小程序实现滚动Tab选项卡
Nov 16 #Javascript
小程序实现tab标签页
Nov 16 #Javascript
You might like
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
php适配器模式简单应用示例
2019/10/23 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
python使用Tesseract库识别验证
2018/03/21 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Python 加密与解密小结
2018/12/06 Python
python生成器与迭代器详解
2019/01/01 Python
Python读取表格类型文件代码实例
2020/02/17 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
2019年.net常见面试问题
2012/02/12 面试题
蜜蜂引路教学反思
2014/02/04 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
卫生标语大全
2014/06/21 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis