vue 事件总线(bus)
1.全局引入bus
Vue.prototype.$bus = new.Vue()
2.组件间传值使用(在发送事件时接收组件会实时接收到, 可以用做兄弟组件间相互传值, 但页面跳转组件间有问题 通过$emit发送,$on接收)
<div style="float: left; width: 15%; height: 100%;">
<div v-for="(item, index) in list"
:key="index"
@click="okClick(item)">{{item.name}}</div>
</div> methods: {
okClick (item) {
this.$bus.$emit('busClick', item.id)
}
},
mounted() {
console.log('123')
this.$bus.$on('busClick', item => {
switch (item) {
case '看下值过来没' :
this.items = '看下值过来没'
break
case 1 :
this.items = 1
break
case 2 :
this.items = 2
break
}
})
},
3.再接收组件销毁时要把事件清除掉,不然会重复发送和接收
beforeDestroy() {
this.$bus.$off()
}
vue 事件总线(bus)的更多相关文章
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue笔记 - 组件间通信 之 中央事件总线bus
中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...
- Vue事件总线(eventBus)$on()会多次触发解决办法
项目中使用了事件总线eventBus来进行两个组件间的通信, 使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue'export def ...
- Vue事件总线
一 项目结构 二 main.js import Vue from "vue"; import App from "./App.vue"; import Tool ...
- 如何在 pyqt 中实现全局事件总线
前言 在 Qt 中可以使用信号和槽机制很方便地实现部件之间的通信,考虑下面这样的场景: 我想要点击任意一个专辑卡并通知主界面跳转到专辑界面,那么一种实现方式如上图所示:点击任意一个蓝色方框所示的专辑卡 ...
- vue组件中—bus总线事件回调函数多次执行的问题
在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...
- vue bus 中央事件总线
1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() // 全局引入mai.jsvue中央事件总 ...
- vue组件传参的方法--bus事件总线
定义:事件总线是实现vue任意组件之前传递参数的一种编程技巧,本质上就是组件的自定义事件.事件总线有很多种写法,具体的思路就是创造一个大家都可以访问到的公共的属性,在这个公共的属性上面可以调用$on, ...
- vue中央事件总线eventBus的简单理解和使用
公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信.它是实现非父子组件通信的一种解决方案. 用法如下: 第一步:项目中创建一个js文件(我通 ...
随机推荐
- CompletableFuture--给future调用增加回调或聚合操作
CompletableFuture--增大内存节省时间.整合多个future调用,来减少时间 例如:第一个future 返回时1s,第二个返回时2s,第三个返回是3s CompletableFut ...
- 2020 CCPC比赛
https://ac.nowcoder.com/acm/contest/4010/A 这道题枚举区间长度的贡献值: 当区间长度为1时,就是所有元音数的个数: 当区间长度为2时,区间[2,n-1]的数贡 ...
- .net core 2.2 使用imagemagick 将pdf转化为png
工作需要将PDF文件每一页拆分为一个一个的png文件 测试环境:mac,visual studio for mac 2019 nuget:magick.net-Q16-AnyCPU 不能直接支持PDF ...
- Java 字符串、数值与16进制相互转化
字符串.数值与16进制相互转化 首先创建一个工具类: package c; public class DataUtils { /* * 字节数组转16进制字符串 */ public static St ...
- 使用yum时出现Error: rpmdb open failed解决方案
一.问题描述 使用yum安装软件时出现Error: rpmdb open failed,报错信息显示rpm数据库被损坏. 二.解决方案 重建rpm数据库. [root@localhost yum.re ...
- 在电竞圈想摧枯拉朽的AI,到底能带来什么?
2019ChinaJoy,似乎并没有让这个暑期彻底燃动起来.在业界和玩家看来,2019ChinaJoy亮点匮乏.饱受诟病.不过细心观察的话,能够发现一个特殊现象--AI取代此前猎艳性质的cosplay ...
- Oracle的表空间、用户和模式
Oracle 的 表空间(Tablespace).用户(User).模式(Schema) 前面有整理了一篇 Oracle 数据库(database) 与 实例(instance) 的概念及关系整理 ...
- 把jar包部署为linux服务
一直未配置成功,直到放弃后reboot了下,才直到错的不是自己的配置,而是自己不懂 1.在touch /etc/rc.d/init.d/tl_c_cons_service(创建新文件) 2.vi /e ...
- JS json对象(Object)和字符串(String)互转方法
[JS json对象(Object)和字符串(String)互转方法] 参考:https://blog.csdn.net/wenqianla2550/article/details/78232706 ...
- ServletContext的使用
ServletContext: ServletContext表示Servlet应用程序.每个Web应用程序只有一个上下文.在将一个应用程序同时部署到多个容器的分布式环境中,每台Java虚拟机上的Web ...