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); 这是子组件要发到父组件的写法 ...
随机推荐
- 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分 ...
- 关于java职业路径
java,jvm原理,spring原理,mysql锁,事务,多线程,大并发,分布式架构,微服务,以及相关的项目管理
- Java三种注释
单行注释:// 注释内容 多行注释:/*... 注释内容....*/ 文本注释:/**.. 注释内容....*/ 这种注释可以用来自动地生成文档.在JDK中有个 ...
- css 两端对其
大段的文字直接写会有不整齐的现象 所以ui小姐姐就会和我们讲你能不能把两端对其呀 ps里面就可以呀 okok 那就两端对其好了 text-align:justify 效果为⬇️⬇️⬇️ 上面是 ...
- 解决跨域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 ...
- centos 打印机安装方法
这里安装的是hplip 1.首先确定cups有没有安装 没有的话 yum install cups 安装 2.安装 hplip yum install -y hplip hplip-* 3执行 hp- ...
- angular面试记忆的内容
1.ng-class的用法:ng-class="{red:true}"; 2.ng-repeat怎么可以添加重复数据.ng-repeat="item in arr tra ...
- pymysql的使用与参数简要
pymysql.Connect()参数说明 host(str): MySQL服务器地址 port(int): MySQL服务器端口号 user(str): 用户名 passwd(str): 密码 db ...
- pip freeze 命令迁移模块
问题描述:现有一个测试环境安装了脚本相关的各类模块,现需要不通过联网下载,在另一个环境配置安装相同的模块 解决方案: 在安装了python脚本相关的各类模块的测试环境里,进入到任意目录下,导出pyth ...
- 『Python CoolBook』C扩展库_其一_用法讲解
不依靠其他工具,直接使用Python的扩展API来编写一些简单的C扩展模块. 本篇参考PythonCookbook第15节和Python核心编程完成,值得注意的是,Python2.X和Python3. ...