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日期操作

    一.获取当前日期时间 1.1.获得当前日期+时间(date+time)函数:now() 1.2.获取当前日期+时间(date+time)函数:sysdate() 注:二者类拟,不同在于now()在执行 ...

  2. 点火开关分为4个档位,分别是off,acc,IG-on,和ST

    off全车除了常火(如应急灯,时钟等的记忆功能)外,均不供电.acc 是附件档,部分车载附属设备供电,如视听系统,仪表灯,灯光等.也就是说,车停在哪里,发动机不转,除了空调不能用外,车内的设备基本都可 ...

  3. Oarcle 入门之where关键字

    --where 关键字 --作用:过滤行 *将需要的行用where引导出来 用法: 1.判断符号:=,!=,<>,<,>,<=,>=,any,some,all; 例 ...

  4. 移动端长按响应事件以及阻止默认行为e.preventDefault()导致定时器setTimeout不能响应

    手指触摸绑定: $(document).on('touchstart', '.photo', function(e){ currentIndex = parseInt($(this).index('. ...

  5. Java集群优化——使用Dubbo对单一应用服务化改造

    之前,我们讨论过Nginx+tomcat组成的集群,这已经是非常灵活的集群技术,但是当我们的系统遇到更大的瓶颈,全部应用的单点服务器已经不能满足我们的需求,这时,我们要考虑另外一种,我们熟悉的内容,就 ...

  6. BIOS备忘录之ASL code常用知识点

    _HID:device唯一 _STA:决定device在不在(在DM下面能不能看到) _CRS:描述分配给device的资源 _INI:在OSPM加载描述表的时候运行一次(比如,如果要根据不同情况给d ...

  7. haproxy 初识

    官方网站:http://www.haproxy.org 描述 HAProxy的是一个免费的,非常快速和可靠的解决方案,提供 高可用性, 负载均衡和代理对TCP和基于HTTP的应用程序.它特别适用于流量 ...

  8. IDEA设置(含永久破解IDEA)

    永久破解IDEA(很多license服务器都是非永久性的,太麻烦了) https://www.cnblogs.com/iathanasy/p/9469280.html,亲测. 在我们为 IDEA 等编 ...

  9. Qt Windows打开指定文件注意替换双斜杠为单斜杠

    QProcess::startDetached(QString("explorer %1").arg(strFilePath)); 其中,在windows上使用时,strFileP ...

  10. 20165306 2017-2018-2《Java程序设计》课程总结

    课程总结 每周作业链接汇总: 预备作业一:我期望的师生关系 预备作业二:学习基础和C语言基础调查 预备作业三:Linux安装与学习 第一周作业:Java入门 第二周作业:基本数据类型与数组,运算符.表 ...