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. 【Spark-core学习之七】 Spark广播变量、累加器

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  2. lua语言中的假

    [1]测试及结论 (1)代码 local var_false = false local var_nil = nil if var_zero then print('var_zero : true') ...

  3. IDEA 自动重新载入

    IDEA 自动重新载入: Ctrl + F9

  4. 在CI (Jenkins) 从机(服务器)上使用bat批处理执行自动构建任务时,输出NuGet还原失败的解决方案

    编译环境:Jenkins+MSBuilds 1.搜索本次构建的解决方案中的所有csproj后缀文件,打开后找到这一段代码,并且删除掉.如果没有,直接忽略跳过. <Import Project=& ...

  5. 【python】python2.x中的除法

    在生信分析中有许多时候我们需要用到除法,在经历无数次break out 之后我终于发现原来python 2.x中只有整除,而没有浮点除法,这就是没有基础的弊病. 那么如何在python 2.x中运用除 ...

  6. maven maven-war-plugin 解决java war项目间的依赖(两个war都可独立部署运行,maven 3.2.x亲测)

    最近整理基础框架,有些项目不想分布式,所以基础框架必须同时可独立部署,也可直接被作为依赖和业务工程打到一起,记录下解决war项目依赖的要点,一开始用warpath,结果报找不到,有些帖子还是17年的, ...

  7. vue_elementUI_ tree树形控件 获取选中的父节点ID

    el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...

  8. zabbix链接规则

    通过磁盘  Disk for discovery    custom.vfs.dev.discovery 配置自动发现参考

  9. IOS 应用发布流程

    发布流程总结成三个步骤: iOS应用发布流程(一)------相关app证书的申请.下载以及安装 http://blog.csdn.net/ys371277787/article/details/50 ...

  10. Kotlin 条件控制

    IF 表达式 一个 if 语句包含一个布尔表达式和一条或多条语句. // 传统用法 var max = a if (a < b) max = b // 使用 else var max: Int ...