vue中的bus事件,一般作为中央事件总线来使用

简单例子:比如在A,B组件为兄弟组件,现在A要调用B的中C事件

1.创建一个bus.js

内容:

import Vue from 'vue'

const Bus = new Vue()

export { Bus }

2.在A,B组件中引入bus.js

import { Bus } from 'bus'

3.在A组件中定义要调用B事件的bus事件名

例如:Bus.$emit('callC')

4.在B组件中调用C方法

Bus.$on('callC',this.C)

Bus.$on里有两个参数,第一个是在A组件定义的名字,第二个参数是B组件要调用的方法

vue bus的使用的更多相关文章

  1. vue bus 的使用

    简单的状态管理,可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定义:main.js window.even ...

  2. Vue bus的使用(兄弟|非父子组件传值)-->可以使用一个空的Vue实例作为中央事件总线new Vue()

    1.在main.js中注册全局的bus  Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用:this.bus.$emit('自定义事件名',data) metho ...

  3. vue Bus总线

    有时候两个组件也需要通信(非父子关系).当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线. 参考:http://blog.csdn.net/u0130340 ...

  4. vue bus方式解决非父子组件间的传值

    对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...

  5. vue bus 中央事件总线

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

  6. vue bus.js 使用方法

    1 ,新建bus.js 内容如下 2,bus.$emit 绑定数据 bus.$emit('tags', this.tagsList); 第一个参数为定义的变量,第二个为集合数据 3, 监听数据 bus ...

  7. vue中非父子组件的传值bus的使用

    非父子之间的组件传值,可以使用vuex.简单的状态管理,也可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定 ...

  8. vue 传值 概述 个人理解

    1 父传子   子组件  props:[‘自定义属性名’]   父组件  v-bind:自定义属性名="值"  理解 子组件创建一个自定属性   父组件使用vue指令绑定到 自定义 ...

  9. vue 父子之间通信及非父子之间通信

    直接看图说话 vue Bus总线 import Vue from 'vue';import VueBus from 'vue-bus';Vue.use(VueBus); 这是子组件要发到父组件的写法 ...

随机推荐

  1. mysql 事务锁超时时间 innodb_lock_wait_timeout

    mysql 事务锁超时时间 innodb_lock_wait_timeout: # 查询全局等待事务锁超时时间 SHOW GLOBAL VARIABLES LIKE 'innodb_lock_wait ...

  2. rangeOfString 和 containsString 兼容iOS7处理

    //查找字符串是否包含"心" NSString *str = @"每天都有好心情"; if ([str containsString:@"心" ...

  3. jQuery实现淘宝轮播图

    我爱撸码,撸码使我感到快乐大家好,我是Counter今天给大家分享的是利用jQuery来实现淘宝轮播图,揭开这层神秘的面纱,CSS样式就不做过多的赘述了,主要就是实现的原理,也就是jQuery,老样子 ...

  4. pandas之时间序列

    Pandas中提供了许多用来处理时间格式文本的方法,包括按不同方法生成一个时间序列,修改时间的格式,重采样等等. 按不同的方法生成时间序列 In [7]: import pandas as pd # ...

  5. 再谈git和github-深入理解-2

    github中的 sloc是什么意思? sloc: source lines of code: 代码行数, 源代码行. 要向仓库中 create file/upload file/edit file等 ...

  6. 【Visual Studio 扩展工具】使用ComponentOne中的GroupDefinition和SortDefinition属性保存和还原布局

    概述 在此前的ComponentOne中,我们为C1FlexGrid(最快,最灵活的.Net数据网格控件)添加了一个非常强大的动态分组功能,这篇技术博客<将动态分组添加到.NET表格控件Flex ...

  7. Cookie和Seesion

    会话跟踪技术 1 什么是会话跟踪技术 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而10 ...

  8. ceph储存的S3接口实现(支持断点续传)

    最近公司准备接ceph储存,研究了一番,准备用亚马逊的s3接口实现,实现类如下: /** * Title: S3Manager * Description: Ceph储存的s3接口实现,参考文档: * ...

  9. Redis入门指南之三(入门)

    本节主要介绍Redis的5种数据类型,同时使用Python API来操作Redis,其中python版本为3.5, redis版本为4.0.2. redis-py 的API的使用可以分类为: (1)连 ...

  10. [Spring MVC] 表单提交日期转换问题,比如可能导致封装实体类时400错误

    三种格式的InitBinder @InitBinder//https://stackoverflow.com/questions/20616319/the-request-sent-by-the-cl ...