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. UI组件的学习

    今天继续学习UI的组件知识,包括文本框,编辑框,普通按钮,图片按钮,单选按钮以及复选框组件,今天所学的组件的方法及属性与之前的组件大部分相同. 1. 文本框组件 TextView 文本框组件就是最常见 ...

  2. AcWing 154. 滑动窗口

    https://www.acwing.com/problem/content/156/ #include <iostream> using namespace std; ; int a[N ...

  3. codeforces div2 603 C. Everyone is a Winner!(二分)

    题目链接:https://codeforces.com/contest/1263/problem/C 题意:给你一个数字n,求n/k有多少个不同的数 思路:首先K大于n时,n/k是0.然后k取值在1到 ...

  4. PHP正则表达式常用例子

    "^[0-9]*[1-9][0-9]*$" //正整数"^((-\d+)|(0+))$" //非正整数(负整数 + 0)"^-[0-9]*[1-9][ ...

  5. 对于一些stl自定义比较函数

    1.unorderd_map自定义键 自定义类型 struct my_key { int num; string name; }; 1.由于unordered_map是采用哈希实现的,对于系统的类型i ...

  6. AcWing 841. 字符串哈希

    //快速判断两次字符串是不是相等 #include<bits/stdc++.h> using namespace std ; typedef unsigned long long ULL; ...

  7. 3.0 java学习网站

    1.http://www.rupeng.com/Courses/Index/51 2.https://www.zhihu.com/question/25255189

  8. 题解【SP1043】 GSS1 - Can you answer these queries I

    题目描述 You are given a sequence \(A_1, A_2, ..., A_n(|A_i|≤15007,1≤N≤50000)\). A query is defined as f ...

  9. Codeforces Round #624 (Div. 3) F

    题意: 给出n的质点,带着初位置和速度: 如果中途两点可以相遇dis(i,j)=0: 如果不可以相遇,mindis(i,j): 求n个点的两两质点最小dis(i,j)之和 思路: 因为当初位置x和速度 ...

  10. 五种网络IO模型以及多路复用IO中select/epoll对比

    下面都是以网络读数据为例 [2阶段网络IO] 第一阶段:等待数据 wait for data 第二阶段:从内核复制数据到用户 copy data from kernel to user 下面是5种网络 ...