bus事件总线传值
import Vue from 'vue'
var bus = new Vue()
export default bus
监听事件:
// header组件
<template>
<div>
<div>{{ addTodo }},你好世界</div>
</div>
</template> <script>
data () {
return {
addTodo:""
}
},
created() {
this.$bus.on('add-todo', (val) => {
this.addTodo = val
});
},
</script>
首页监听

触发事件:
// footer组件
<template>
<div>
<div @click=“send”></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
userName:null,
newTodoText:''
}
},
methods: {
send () {
this.newTodoText = 'hello world'
this.$bus.emit('add-todo', this.newTodoText ); },
}
}
</script>
详情页触发

bus事件总线传值的更多相关文章
- vue组件传参的方法--bus事件总线
定义:事件总线是实现vue任意组件之前传递参数的一种编程技巧,本质上就是组件的自定义事件.事件总线有很多种写法,具体的思路就是创造一个大家都可以访问到的公共的属性,在这个公共的属性上面可以调用$on, ...
- Vue开发中的中央事件总线
在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- 并发编程概述 委托(delegate) 事件(event) .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类,支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)
并发编程概述 前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- 事件总线(Event Bus)知多少
源码路径:Github-EventBus 简书同步链接 1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对发布-订阅模式的一种实现.它是一种集 ...
- vue笔记 - 组件间通信 之 中央事件总线bus
中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...
- 事件总线(Event Bus)
事件总线(Event Bus)知多少 源码路径:Github-EventBus简书同步链接 1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对 ...
- vue bus 中央事件总线
1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() // 全局引入mai.jsvue中央事件总 ...
随机推荐
- 用第三方工具类,将JavaBean、List、Map<String,Object>转成JSON文本
导入第三方jar包: >commons-beanutils-1.7.0.jar >commons-collections-3.1.jar >commons-lang-2.5.jar ...
- Android数据存储的方式
1. 内部存储 * 路径: /data/data/包名/ * cache用于存储临时文件,系统内存不足时,清除缓存数据 * files用于存储重要的文件,要用户手动在应用程序列表清 ...
- 关于虚拟机可以ping通本机,本机可以ping通虚拟机,但是虚拟机就是不能上网
1 需要确定虚拟的防火墙已经关闭 2 修改vi /etc/sysconfig/network-scripts/ifcfg-eth0配置文件 增加以下参数 BOOTPROTO=none------- ...
- spring-kafka —— 生产者消费者重要配置
一.生产者配置 # 以逗号分隔的主机:端口对列表,用于建立与Kafka群集的初始连接 spring.kafka.producer.bootstrap-servers=TopKafka1:9092,To ...
- Button加在UITableViewHeaderFooterView的self.contentView上导致不能响应点击
你有没有遇到过Button加在UITableViewHeaderFooterView的self.contentView上导致不能响应点击的情况,下面记录一下我遇到的原因和解决方法: 代码如下: - ( ...
- dtcms 手机浏览
private string GetSitePath(string webPath, string requestPath, string requestDomain) { //获取当前域名包含的站点 ...
- Spark在Windows上调试
1. 背景 (1) spark的一般开发与运行流程是在本地Idea或Eclipse中写好对应的spark代码,然后打包部署至驱动节点,然后运行spark-submit.然而,当运行时异常,如空指针或数 ...
- pagefile.sys 虚拟内存
当我们使用电脑的时候,有时候需要更多的内存空间,但是内存条的价格又比较昂贵,我们可以用虚拟内存的方法,把一部分硬盘的空间作为内存使用. 进入控制面板---高级系统设置----高级-----更改---- ...
- GAN(生成对抗网络)之keras实践
GAN由论文<Ian Goodfellow et al., “Generative Adversarial Networks,” arXiv (2014)>提出. GAN与VAEs的区别 ...
- 【FFMPEG】使用FFMPEG+H264实现RTP传输数据
开发环境:WINDOWS7 32bitMINGWeclipse juno cdt1.首先你要编译好FFMPEG,a) 方法一:可以去官网下载源码,用MINGW编译(编译时记得支持H264,当然,事先得 ...