简单的状态管理,可以用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. C# 设计模式-策略者模式(Strategy)

    策略模式的用意是针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换.策略模式使得算法可以在不影响到客户端的情况下发生变化. 策略模式是对算法的包装,是把使用算法的责任和 ...

  2. Python常用时间操作总结【取得当前时间、时间函数、应用等】转载

    Python常用时间操作总结[取得当前时间.时间函数.应用等] 转载  2017-05-11   作者:清风乐逍遥    我要评论 这篇文章主要介绍了Python常用时间操作,包括取得当前时间.时间函 ...

  3. Python基础3 函数、递归、内置函数

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 温故知新 1. 集合 主要作用: 去重 关系测 ...

  4. leetcode1005

    func largestSumAfterKNegations(A []int, K int) int { sort.Ints(A) var negatives int var zeros int va ...

  5. python3.6.2(32位)的安装-1

    简介:Python不需要编译成机器代码,是解释执行.解释器是机器指令,CPU执行解释器,解释器执行代码. 1.Python官网下载地址:https://www.python.org/,选择Downlo ...

  6. 机器学习入门-数值特征-进行二值化变化 1.Binarizer(进行数据的二值化操作)

    函数说明: 1. Binarizer(threshold=0.9) 将数据进行二值化,threshold表示大于0.9的数据为1,小于0.9的数据为0 对于一些数值型的特征:存在0还有其他的一些数 二 ...

  7. Redis简单生产者消费者

    注意:redis客户端执行是单线程的,不能将客户端放在外面,内部执行使用多线程的方式. // 创建生产端连接 final Jedis jedisProducter = new Jedis(R_HOST ...

  8. 获取本机内网、外网ip(C++)<转>

    基础知识 电脑在局域网内,通过网关/路由器连接到Internet则ip分为内网ip.外网ip.通过ipconfig得到的为局域网ip. 电脑直接拨号连接等,则本机通过ipconfig得到的就是外网ip ...

  9. JULIA BOORSTIN — Interview a Broadcaster!

    JULIA BOORSTIN — Interview a Broadcaster! Share Tweet Share Tagged With: Interview a Broadcaster Stu ...

  10. C++17尝鲜:变长 using 声明

    using 声明 先来看 using 声明在类中的应用: 代码1 #include <iostream> using namespace std; struct A { void f(in ...