vue组件中传值EventBus的使用及注意事项说明
主要想说下非父子组件之间的通信。
项目场景:
在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
2、在需要使用eventbus的组件中引入步骤1创建的js文件
bus.$emit进行传值
3、在另一个组件中使用bus.$on进行接收
其中,msg即为步骤2中emit携带的参数“123”
以上这篇vue组件中传值EventBus的使用及注意事项说明就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程