主要想说下非父子组件之间的通信。
项目场景:
在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的使用及注意事项说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持站长技术。
HTML中表单可以用来搜集用户各种类型的输入信息。表单实际上是包含表单元素的区...
01、python2中有range和xrange这两个有什么区别 02、print(int(‘111’, 2)) 的...
思维导图 介绍 正则表达式,大家在开发中应该是经常用到,现在很多开发语言都有...
文章目录 一、分块查找算法 二、实例实现分块查找算法 本系列文章通过 1000一篇...
前言 WAF工作原理 在实际的渗透测试过程中经常会碰到网站存在WAF的情况。网站存...
1.在vue项目根目录下新建vue.config.js(不是在src下面) vue.config.js配置文件...
前言 在我们很多应用中会遇到有一种基于一系列时间的数据需要处理,通过时间的顺...
改变select默认的样式,一般情路情况下通过ul,li来模拟来实现。 有很多Jquery插...
通过请求获取充分格式化的HTML虽然很方便,但这也意味着必须在传输文本内容的同...
文章目录 试题A立方和 试题B子串数字 试题C质数 试题D: 最短路 试题E: RSA解密 ...