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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
你真的了解JavaScript吗?
Feb 24 Javascript
JavaScript中的其他对象
Jan 16 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
小程序自定义弹框效果
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
php中文件上传的安全问题
2006/10/09 PHP
php2html php生成静态页函数
2008/12/08 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
php取出数组单个值的方法
2018/03/12 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Python PIL库图片灰化处理
2020/04/07 Python
python3中for循环踩过的坑记录
2020/12/14 Python
公司培训欢迎词
2014/01/10 职场文书
2016公司年会通知范文
2015/04/25 职场文书
给学校的建议书400字
2015/09/14 职场文书
Python OpenCV快速入门教程
2021/04/17 Python