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事件总线传值的更多相关文章

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

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

  2. Vue开发中的中央事件总线

    在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...

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

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

  4. 并发编程概述 委托(delegate) 事件(event) .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类,支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)

    并发编程概述   前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...

  5. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  6. 事件总线(Event Bus)知多少

    源码路径:Github-EventBus 简书同步链接 1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对发布-订阅模式的一种实现.它是一种集 ...

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

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

  8. 事件总线(Event Bus)

    事件总线(Event Bus)知多少 源码路径:Github-EventBus简书同步链接 1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对 ...

  9. vue bus 中央事件总线

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

随机推荐

  1. Myeclipse 启动tomcat项目报Out of memory: java heap space

    问题: 在Myeclipse中启动tomcat,程序启动过程中报内存不足,java.lang.OutOfMemoryError: Java heap space 从错误可以看出是堆内存太小,需要配置j ...

  2. Linux上MongoDB一些设置

    MongoDB启动停止方法 官网安装介绍中依然有启动停止的方式 1 启动 sudo service mongod start 2 停止 sudo service mongod stop 3 重启 su ...

  3. python #!/usr/bin/python作用

    #!/usr/bin/python指定用什么解释器运行脚本以及解释器所在的位置 # -*- coding: utf-8 -*-用来指定文件编码为utf-8的PEP 0263 -- Defining P ...

  4. python 粘包现象

    一. 粘包现象 1. 粘包现象的由来(1)TCP属于长连接,当服务端与一个客户端进行了连接以后,其他客户端需要(排队)等待.若服务端想要连接另一个客户端,必须首先断开与第一个客户端的连接. (2)缓冲 ...

  5. springboot-helloworld-eclipse

    1.eclipse安装springboot插件 2.new->Spring Start ->group:组名称:artifact:组件名称:->选中web->finish 3. ...

  6. uni-app 使用本地打包配置安卓原生插件

    在使用 uni-app 开发的时候,遇到了一个很棘手的问题.即获取设备参数的时候 uni-app 并没有相关方法,而安卓开发是可以做到的,因为接的是三方推广,所以功能必须实现,所以求助了安卓的大佬帮我 ...

  7. libev 源码解析

    一  libev简介 libev是一个轻量级的事件通知库,具备支持多种事件通知能力,通过对libev的源码的阅读,可以清楚了解事件通知实现内部机制. 二 核心数据结构 在libev中关键的数据结构是, ...

  8. mysql数据库之单表查询多表查询

    单表查询 前期表准备 create table emp( id int not null unique auto_increment, name varchar(20) not null, sex e ...

  9. day33 网络编程之UDP与进程了解

    UDP 什么是UDP协议 在上节课的练习中,使用TCP进行网络编程时,我们会遇到粘包问题,这是因为TCP是流式协议,而今天学习的UDP协议不是流式协议,其发送的数据是数据报格式的,在进行数据发送时该协 ...

  10. 关于MYSQL安装踩的坑

    前提:本人装的版本是mysql-8.0.18-winx64,win10系统,如果你安装的是其他版本的MYSQL,语法会跟下面有些许区别: 一,安装 https://dev.mysql.com/down ...