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. JavaScript 作用域链其实很简单

    概念 作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问.其本质就是一个指向变量对象的指针列表.在js中,当某个函数被调用时,会创建一个执行环境(execution context)及 ...

  2. Shell 实践、常用脚本

    (1)计算1-100的和. #!/bin/bash n= ` do n=$[$i+$n] done echo $n (2)输一个数字,然后计算出1到数字的和,要求如果输入数字小于1,则重新输入,知道输 ...

  3. kernel: INFO: task sadc:14833 blocked for more than 120 seconds.

    早上一到,发现oracle连不上. 到主机上,发现只有oracleora11g一个进程,其他进程全没了. Nov 14 23:33:30 hs-test-10-20-30-15 kernel: INF ...

  4. ubuntu kylin18 安装NVIDIA驱动

    这几天装系统快被折腾死了,事情的起因是这样的. 这件事情发生之前那两天一直在调试oled屏幕.我自己做转接板,1.3寸30针fpc的接口. 由于没有使用fpc专用转接座子,导致焊接特别困难,索性最后牺 ...

  5. 【2.0】SpringBoot连接MySql 8.0的url设置

    jdbc:mysql://localhost:3306/enterprise?useUnicode=true&amp&useSSL=false&amp&characte ...

  6. arXiv 提交 pre-print 文章的相关注意事项

    arXiv 提交 pre-print 文章的相关注意事项 2018-11-25 22:38:28 1. 有一个可以正常上传 paper 的 arXiv 账号:https://arxiv.org/  这 ...

  7. 编码原则 之 Persistence Ignorance

    原文 The principle of Persistence Ignorance (PI) holds that classes modeling the business domain in a ...

  8. Globecom 2018 投稿过程

    Globecom 2018 投稿过程 IEEE 通信领域旗舰型会议 Globecom 2018 将于近日提交 Camera-Ready 稿件.回顾今年投稿过程,虽麻烦不断但也不算特别曲折,本篇随笔记录 ...

  9. Linux常用命令——文件搜索命令

    Linux常用命令——文件搜索命令 Linux  以#号开头的内容都是内容描述或配置项 find 描述:文件搜索 语法:find [搜索范围] [范围条件] . 当前目录 示例:[root@local ...

  10. 【Ruby】【环境搭建】macOS Sierra 10.12.6 + Xcode 8 + gpg 2.2.8 + rvm 1.29.3 + Ruby 2.4.0 + RubyMine 2018.1.4

      按出场顺序: macOS Sierra 10.12.6  +  Xcode 8 + gpg 2.2.8 + rvm 1.29.3 +  Ruby 2.4.0 + RubyMine 2018.1.4 ...