vue bus的使用
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的使用的更多相关文章
- vue bus 的使用
简单的状态管理,可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定义:main.js window.even ...
- Vue bus的使用(兄弟|非父子组件传值)-->可以使用一个空的Vue实例作为中央事件总线new Vue()
1.在main.js中注册全局的bus Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用:this.bus.$emit('自定义事件名',data) metho ...
- vue Bus总线
有时候两个组件也需要通信(非父子关系).当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线. 参考:http://blog.csdn.net/u0130340 ...
- vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
- vue bus 中央事件总线
1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() // 全局引入mai.jsvue中央事件总 ...
- vue bus.js 使用方法
1 ,新建bus.js 内容如下 2,bus.$emit 绑定数据 bus.$emit('tags', this.tagsList); 第一个参数为定义的变量,第二个为集合数据 3, 监听数据 bus ...
- vue中非父子组件的传值bus的使用
非父子之间的组件传值,可以使用vuex.简单的状态管理,也可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定 ...
- vue 传值 概述 个人理解
1 父传子 子组件 props:[‘自定义属性名’] 父组件 v-bind:自定义属性名="值" 理解 子组件创建一个自定属性 父组件使用vue指令绑定到 自定义 ...
- vue 父子之间通信及非父子之间通信
直接看图说话 vue Bus总线 import Vue from 'vue';import VueBus from 'vue-bus';Vue.use(VueBus); 这是子组件要发到父组件的写法 ...
随机推荐
- RxJava 详解——简洁的异步操作(一)
随着越来越多的人开始提及 RxJava ,鉴于 RxJava 目前这种既火爆又神秘的现状,写下这篇文章来对 RxJava 做一个相对详细的.针对 Android 开发者的介绍. 这篇文章的目的有两个: ...
- html5与css3面试题(1)
1.html有哪些新特性移除了哪些元素 新特性: 语义化标签(header,nav,footer.section) 音频,视频(audio,video) 画布canvas 移除元素: 表现元素:cen ...
- oracle group by placement可能导致错误结果的bug
Last week I’ve mentioned on Twitter that we ran into wrong result bug. We found workaround quickly b ...
- UI自动化(八)xpath
由于最新版火狐不在支持FireBug等开发工具,可以通过https://ftp.mozilla.org/pub/firefox/releases/下载49版本以下的火狐就可以增加Firebug等扩展了 ...
- 修改SS配置文件使其同时支持IPV4和IPV6网络
将/etc/shadowsocks-libev/config.json文件中的 "server":"0.0.0.0", 修改为: "server&qu ...
- Ngnix配置
server { listen 80; server_name www.local.test; root /data/workspace; index index.php index.html in ...
- vue--显示和隐藏
一.v-if 判断通常是对用户行为的判断 用js来控制,则是使用if语句进行判断,而vue也提供了一个类似if语句的指令——v-if实现条件判断 首先在数据项里设置变量 data() { return ...
- _pet
可以控制各职业召唤物的属性.用于增强BB `comment` 备注 `classIndex` 职业序号 `DmgAddPct` 宠物伤害倍率 `SpAddPct` 法术伤害 `HpAddPct`血量倍 ...
- 使用 R 语言挖掘 QQ 群聊天记录
1.获取数据 从 QQ 消息管理器中导出消息记录,保存的文本类型选择 txt 文件.这里获取的是某群从 2016-04-18 到 2016-05-07 期间的聊天记录,记录样本如下所示. 消息记录(此 ...
- 基于TCAM 的高速路由查找
摘要 随着路由器接口速率的提高,传统的软件路由查找机制已经不能满足要求.目前常见的硬件解决方案是采用TCAM实现关键词 TCAM,路由查找,最长前缀匹配. 1.引言 路由器转发IP 分组时,转发引擎需 ...