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); 这是子组件要发到父组件的写法 ...
随机推荐
- P1744 采购特价商品 最短路径
P1744 采购特价商品 图论-----最短路径算法 弗洛伊德算法 O(n^3) 代码: #include<iostream> #include<cstdio> #inclu ...
- Docker Kubernetes 创建管理 Pod
Docker Kubernetes 容器扩容与缩容 环境: 系统:Centos 7.4 x64 Docker版本:18.09.0 Kubernetes版本:v1.8 管理节点:192.168.1.79 ...
- Linux下执行Oracle的sql脚本
(1) 启动监听: Root用户登录后,输入: $su – oracle 回车(Oracle为Oracle数据库安装用户,必须有横杠: - ) 启动监听: $lsnrctl start --启动 $ ...
- Bitmap的秘密
作者: 周海鹏 来源: infoQ 发布时间: 2015-02-13 11:26 阅读: 4999 次 推荐: 10 原文链接 [收藏] 之前已经参加过几次QCon峰会,不过今年QCo ...
- phpstorm 安装yaf代码提示文件
安装yaf代码提示:https://www.jianshu.com/p/dc719ae74f97 4.下载代码提示文件 下载地址: https://github.com/xudianyang/yaf. ...
- 新建Maven项目建成后本应该有的src/main/java和src/test/java目录并没有出现:
转自:http://www.cnblogs.com/dong-dong-dong/p/9565466.html 新建Maven项目建成后本应该有的src/main/java和src/test/java ...
- IDEA的校园邮箱激活方式
链接: https://blog.csdn.net/m0_37286282/article/details/78279060
- SQLyog 字体设置
新公司连接数据库的工具是SQLyog,我以前使用的一直是Navicat,抱着多学个工具也不亏的想法我也安装了试下,但是SQLyog那紧凑的字体对于近视200度的我来说看着着实难受,在询问了公司前辈之后 ...
- 【HNOI 2018】道路
Problem Description \(W\) 国的交通呈一棵树的形状.\(W\) 国一共有\(n - 1\)个城市和\(n\)个乡村,其中城市从\(1\)到\(n - 1\) 编号,乡村从\(1 ...
- react-native android 运行命令
debug模式运行 sudo react-native run-android release模式运行 sudo react-native run-android --variant=release ...