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. 51nod 1101 换零钱 (完全背包)

    N元钱换为零钱,有多少不同的换法?币值包括1 2 5分,1 2 5角,1 2 5 10 20 50 100元. 例如:5分钱换为零钱,有以下4种换法: 1.5个1分 2.1个2分3个1分 3.2个2分 ...

  2. 关于java职业路径

    java,jvm原理,spring原理,mysql锁,事务,多线程,大并发,分布式架构,微服务,以及相关的项目管理

  3. Java三种注释

    单行注释:// 注释内容 多行注释:/*... 注释内容....*/ 文本注释:/**.. 注释内容....*/                     这种注释可以用来自动地生成文档.在JDK中有个 ...

  4. css 两端对其

    大段的文字直接写会有不整齐的现象  所以ui小姐姐就会和我们讲你能不能把两端对其呀  ps里面就可以呀 okok  那就两端对其好了 text-align:justify 效果为⬇️⬇️⬇️  上面是 ...

  5. 解决跨域No 'Access-Control-Allow-Origin' header is present on the requested resource.

    用angular发起http.get(),访问后端web API要数据,结果chrome报错:跨域了 Access to XMLHttpRequest at 'http://127.0.0.1:300 ...

  6. centos 打印机安装方法

    这里安装的是hplip 1.首先确定cups有没有安装 没有的话 yum install cups 安装 2.安装 hplip yum install -y hplip hplip-* 3执行 hp- ...

  7. angular面试记忆的内容

    1.ng-class的用法:ng-class="{red:true}"; 2.ng-repeat怎么可以添加重复数据.ng-repeat="item in arr tra ...

  8. pymysql的使用与参数简要

    pymysql.Connect()参数说明 host(str): MySQL服务器地址 port(int): MySQL服务器端口号 user(str): 用户名 passwd(str): 密码 db ...

  9. pip freeze 命令迁移模块

    问题描述:现有一个测试环境安装了脚本相关的各类模块,现需要不通过联网下载,在另一个环境配置安装相同的模块 解决方案: 在安装了python脚本相关的各类模块的测试环境里,进入到任意目录下,导出pyth ...

  10. 『Python CoolBook』C扩展库_其一_用法讲解

    不依靠其他工具,直接使用Python的扩展API来编写一些简单的C扩展模块. 本篇参考PythonCookbook第15节和Python核心编程完成,值得注意的是,Python2.X和Python3. ...