简单的状态管理,可以用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. $tojson和json.stringify的区别

    JSON.stringify(),将value(Object,Array,String,Number...)序列化为JSON字符串 JSON.parse(), 将JSON数据解析为js原生值 toJS ...

  2. java中的byte

    8 bit (位) = 1 Byte (字节) java中的byte就是Byte 1024 Byte = 1KB 1024 KB = 1MB 1:“字节”是byte,“位”是bit : 2: 1 by ...

  3. Lua脚本语法说明(转)

    Lua脚本语法说明(增加lua5.1部份特性) Lua 的语法比较简单,学习起来也比较省力,但功能却并不弱. 所以,我只简单的归纳一下Lua的一些语法规则,使用起来方便好查就可以了.估计看完了,就懂得 ...

  4. delphi 属性 参数 新注释

    delphi 属性 参数 新注释,在写代码的时候,可以自动看到属性.参数的的备注说明,太方便了. Tmyclass=class /// <summary> /// 姓名 /// </ ...

  5. C# 方法参数传递方式 关键字(in、out、ref)

    in:  值传递,默认传递方式: ref:地址/引用传递,调用时该参数必需已经初始化: out:地址/引用传递,调用时该参数不需要先初始化(被调用方负责该参数的初始化). 注1: in  关键字用于向 ...

  6. day16-小数据池

    一,什么是代码块 Python程序是由代码块构造的.块是一个python程序的文本,他是作为一个单元执行的. 代码块:一个模块,一个函数,一个类,一个文件等都是一个代码块. 而作为交互方式输入的每个命 ...

  7. Zookeeper原理架构

    Zookeeper到底是什么!? 学一个东西,不搞明白他是什么东西,哪还有心情学啊!! 首先,Zookeeper是Apache的一个java项目,属于Hadoop系统,扮演管理员的角色. 然后看到官网 ...

  8. RESET MASTER和RESET SLAVE使用场景和说明,以及清除主从同步关系

    mysql主从复制中,需要将从库提升为主库,需要取消其从库角色,这可通过执行RESET SLAVE ALL清除从库的同步复制信息.包括连接信息和二进制文件名.位置.从库上执行这个命令后,使用show ...

  9. PHP对redis操作详解

    /*1.Connection*/$redis = new Redis();$redis->connect('127.0.0.1',6379,1);//短链接,本地host,端口为6379,超过1 ...

  10. React/anu实现Touchable

    在RN中有一个叫Touchable 的组件,这里我们重演如何实现它. Touchable存在的意义是屏蔽click的问题.移动端与手机的click 在一些浏览器是有差异,比如说著名的300ms延迟. ...