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文件(我通 ...
随机推荐
- 微信或QQ屏蔽了我的域名,已经被微信屏蔽的域名如何在微信打开,如何进行微信域名防封?
微信域名完全防封是绝对不可能的,这是必须明确的,曾经有人打折<不死域名>的概念,它不是不死,是稍微命长一点,在推广上成本更低一下,效果更好一些, 主要的技术原理是利用了腾讯云的域名安全联盟 ...
- Apache Kafka(二)- Kakfa 安装与启动
安装并启动Kafka 1.下载最新版Kafka(当前为kafka_2.12-2.3.0)并解压: > wget http://mirror.bit.edu.cn/apache/kafka/2.3 ...
- 题解【洛谷P1841】[JSOI2007]重要的城市
题面 题解 最短路图模板题. 介绍一下最短路图: 先对原图跑一边单源最短路,求出源点到每个点\(i\)的最短路\(dis[i]\). 接下来构建新图:对于一条边\((x,y,v)\),若\(dis[x ...
- Django_模型继承
解决办法
- 【Markdown】新手快速入门基础教程
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档.当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息.例如:GitHub.简书.reddi ...
- 深入delphi编程理解之接口(一)接口与类的异同及接口的声明和实现
一.抽象类与接口的异同 接口简单的理解可认为是一个抽象类,我们先定义一个抽象类和接口来对比之间的异同,代码如下: type IFormattedNumber = interface //定义接口 fu ...
- 30分钟编写一个抓取 Unsplash 图片的 Python爬虫
我一直想用 Python and Selenium 创建一个网页爬虫,但从来没有实现它. 几天前, 我决定尝试一下,这听起来可能是挺复杂的, 然而编写代码从 Unsplash 抓取一些美丽的图片 ...
- gVim for windows 简单使用教程
vim 是一个具有很多命令的功能非常强大的编辑器.限于篇幅,在本教程当中 就不详细介绍了.本教程的设计目标是讲述一些必要的基本命令,而掌握好这 些命令,您就能够很容易将vim当作一个通用的 ...
- 计算几何-Ang-Rad-Vector
This article is made by Jason-Cow.Welcome to reprint.But please post the article's address. 旋转,跳跃,梦境 ...
- 主库增加表空间导致DG同步失败
由于主库表空间不足,同事给表空间增加数据文件,第二天收到反馈说备库未同步. 1.主.备查看归档序列号,发现主.备归档正常同步. SQL>archive log list 2.在主库端查询v$ar ...