简单的状态管理,可以用vue bus

vue bus可以实现不同组件间、不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下:

全局定义:main.js

window.eventBus = new Vue()
 
在A页面的事件中触发:
eventBus.$emit('todo', '123')
 
在B页面的created中开始监听,越早监听越好:
eventBus.$on('todo', (params) => {
         console.log(params)
})
 
希望能够帮助到你

vue bus 的使用的更多相关文章

  1. Vue bus的使用(兄弟|非父子组件传值)-->可以使用一个空的Vue实例作为中央事件总线new Vue()

    1.在main.js中注册全局的bus  Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用:this.bus.$emit('自定义事件名',data) metho ...

  2. vue Bus总线

    有时候两个组件也需要通信(非父子关系).当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线. 参考:http://blog.csdn.net/u0130340 ...

  3. vue bus的使用

    vue中的bus事件,一般作为中央事件总线来使用 简单例子:比如在A,B组件为兄弟组件,现在A要调用B的中C事件 1.创建一个bus.js 内容: import Vue from 'vue' cons ...

  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. mysql 外键引发的删除失败

    mysql> TRUNCATE TABLE role ; ERROR 1701 (42000): Cannot truncate a table referenced in a foreign ...

  2. SPARK共享变量:广播变量和累加器

    Shared Variables Spark does provide two limited types of shared variables for two common usage patte ...

  3. 1. easyui tree 初始化的两种方式

    /** * 查询角色分类 */function queryRoleCategoryTree(selectId) { var url = basePath + 'rest/roleCategoryCon ...

  4. 01.VMware虚拟机上网络连接(network type)的三种模式--bridged、host-only、NAT

    VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式).要想在网络管理和维护中合理应用它们,你就应该先了解一下这三种工作模式. 1 ...

  5. 浅谈 CAS

    CAS: CAS:Compare and Swap, 翻译成比较并交换. java.util.concurrent包中借助CAS实现了区别于 synchronized 同步锁的一种乐观锁. CAS应用 ...

  6. 用URL传递参数

    用URL传递参数,在园子里找到一篇文章解决了自己的问题,地址如下:http://www.cnblogs.com/lolicon/archive/2009/01/19/1378408.html

  7. jquery接触初级----jquery 对象和Dom对象

    1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...

  8. java script删除数组的方法集合(转载)

    一.清空数组 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即被清空了 二.删 ...

  9. Windows上传代码到github操作指导

    操作环境 Windows7(32bit) 前提条件 1.完成msysgit工具安装.下载路径:官网或百度网盘路径Git-2.15.0-32-bit.exe.安装方法为一路Next按照默认选项执行就可以 ...

  10. js 监听浏览器刷新还是关闭事件 - 转

    监听页面关闭: window.onbeforeunload = function() { //鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置 v ...