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)的更多相关文章

  1. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  2. vue笔记 - 组件间通信 之 中央事件总线bus

    中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...

  3. Vue事件总线(eventBus)$on()会多次触发解决办法

    项目中使用了事件总线eventBus来进行两个组件间的通信, 使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue'export def ...

  4. Vue事件总线

    一 项目结构 二 main.js import Vue from "vue"; import App from "./App.vue"; import Tool ...

  5. 如何在 pyqt 中实现全局事件总线

    前言 在 Qt 中可以使用信号和槽机制很方便地实现部件之间的通信,考虑下面这样的场景: 我想要点击任意一个专辑卡并通知主界面跳转到专辑界面,那么一种实现方式如上图所示:点击任意一个蓝色方框所示的专辑卡 ...

  6. vue组件中—bus总线事件回调函数多次执行的问题

    在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...

  7. vue bus 中央事件总线

    1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() //  全局引入mai.jsvue中央事件总 ...

  8. vue组件传参的方法--bus事件总线

    定义:事件总线是实现vue任意组件之前传递参数的一种编程技巧,本质上就是组件的自定义事件.事件总线有很多种写法,具体的思路就是创造一个大家都可以访问到的公共的属性,在这个公共的属性上面可以调用$on, ...

  9. vue中央事件总线eventBus的简单理解和使用

    公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信.它是实现非父子组件通信的一种解决方案. 用法如下: 第一步:项目中创建一个js文件(我通 ...

随机推荐

  1. Apache Kafka(四)- 使用 Java 访问 Kafka

    1. Produer 1.1. 基本 Producer 首先使用 maven 构建相关依赖,这里我们服务器kafka 版本为 2.12-2.3.0,pom.xml 文件为: <?xml vers ...

  2. Ztree使用教程

    这两天项目需要写一个树形帮助,学习了我们项目组的老师的Ztree的树的写法,实现了这个帮助,下面来总结一下Ztree的用法. (也是参考的一篇csdn上的博客了) zTree 是一个依靠 jQuery ...

  3. Mongo查询list数组中一个字段大于特定条数

    由于刚刚接触mongodb,很多语法还不是很了解,写的不好的地方请大佬指出 查询的demo数据 { "_id":Object("xxxxxxxx"), &quo ...

  4. python-第三方库的理解及某个函数的源代码

    第三方库,是一个总称,里面有各个模块,而具体使用的函数是模块里的. 库包含多个模块, 每个模块里包含多个函数. import AAAA     就是引用AAAA这个库,这个库里的模块函数都可以用,只是 ...

  5. 出现 HTTP Status 500 - Servlet.init() for servlet springmvc threw exception 异常

    出现这种异常在网上搜了搜 ,大多数都是说jdk和tomcat版本的问题:而我前几天都是运行得好好的,今天就编写了代码一运行项目发现报了这个错误.后台仔细看了看错误信息.结果是在你的项目中有相同的req ...

  6. UNICODE编码UTF-16 中的Endian(FE FF) 和 Little Endian(FF FE)

    从网上找到的两篇不错的文章,由于被网上多处转载,所以不知道源处,未能注明出处,希望作者见谅,如有意见请发信给我,谢谢! 第一篇很清晰. 介绍Unicode之前,首先要讲解一些基础知识.虽然跟Unico ...

  7. Bugku-CTF分析篇-weblogic(黑客攻击了Weblogic应用,请分析攻击过程,找出Weblogic的主机名。)

    weblogic 黑客攻击了Weblogic应用,请分析攻击过程,找出Weblogic的主机名. flag格式:flag{} Tip:主机名为十六进制.  

  8. Windows10_64位搭建WampServer(运行php代码)教程及问题

    Windows10_64位搭建WampServer(运行php代码)教程及问题    笔者最近学习PHP,想通过web页面的形式更加形象生动的了解php代码的原理.     于是,这次就通过WampS ...

  9. 矩阵快速幂+概率DP poj 3744

    题意:在一条不满地雷的路上,你现在的起点在1处.在N个点处布有地雷,1<=N<=10.地雷点的坐标范围:[1,100000000]. 每次前进p的概率前进一步,1-p的概率前进1-p步.问 ...

  10. class实现React继承以及constructor的super的问题

    看这篇文章之前 建议先看看阮一峰 的Class继承 便于更好的理解 首先要知道一个问题 React的父子组件和组件类的继承有什么关系?答案是:没有关系 父子组件:指的得是组件标签包含关系 父子组件通过 ...