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中央事件总 ...
随机推荐
- vscode 设置 eclipse 快捷键
点击安装之后,默认就是要ecliplse快捷键了 注意:部分快捷键可能会由于和原来的冲突而失效,例如快速在“下面插入行” ,我还是不能使用ecliplse的Shift+Enter,而要用Ctrl+En ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-2.中大型公司里面项目开发流程讲解
笔记 2.中大型公司里面项目开发流程讲解 简介:讲解一个项目如何从零到上线,经历过怎样的步骤和流程 1.一个中大型项目的开发流程,从需求调研到项目上线 ...
- 数组中存放model去重
在这个项目中出现"添加model数据"数组重复的情况,这就涉及到数组去重的问题了...... 1. 一开始使用的最笨的方法: 依次循环两个数组(原有的数组,选择的数组),双重for ...
- Java集合(7):散列与散列码
散列的价值在于速度.我们使用数组来保存键的信息,这个信息并不是键本身,而是通过键对象生成一个数字(散列码),作为数组下标.由于数组的容量是固定的,而散列容器的大小是可变的,所以不同的键可以产生相同的数 ...
- SpringSecurity快速入门
作者:SingleXu 链接:https://www.jianshu.com/p/8212a559d633 来源:简书 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 简介 Sp ...
- redis集群 应该注意的问题
redis cluster注意的问题 : ‘cluster-require-full-coverage’参数的设置.该参数是redis配置文件中cluster模式的一个参数,从字面上基本就能看出它的作 ...
- Tensorflow 用训练好的模型预测
本节涉及点: 从命令行参数读取需要预测的数据 从文件中读取数据进行预测 从任意字符串中读取数据进行预测 一.从命令行参数读取需要预测的数据 训练神经网络是让神经网络具备可用性,真正使用神经网络时,需要 ...
- 撸了一个简易的工具库: jeasy
一年前,发现在工作的项目中存在大量使用monment的情况,但仅使用到最基础的format功能.monment的体积直接导致项目体积成倍增加,于是jeasy就诞生了. jeasy实现了monment最 ...
- 【CSS】我的样式哪里来的?—— css的继承性
在之前我们写css的时候,曾经出现过如下这样一种情况: 6继承性.html(head部分) <style> div { background-color: #ccc; font-size: ...
- PJzhang:如何缓解Mimikatz从Windows2008 R2内存中读取域控密码?
猫宁!!! 参考: https://xz.aliyun.com/t/4180 https://www.anquanke.com/post/id/156299 https://www.cnblogs.c ...