简单的状态管理，可以用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. Retrofit添加自定义转换器

    Retrofit2开始支持多种 Converter 并存,在之前,如果你遇到这种情况:一个 API 请求返回的结果需要通过 JSON 反序列化,另一个 API 请求需要通过 proto 反序列化,唯一 ...

  2. 将tgz文件解压到指定目录

    转:http://blog.csdn.net/zhenwenxian/article/details/4400404 tar在linux上是常用的打包.压缩.加压缩工具,他的参数很多,折里仅仅列举常用 ...

  3. makefile中 $@, $^, $<, $?含义

    $@ 表示目标文件 $^ 表示所有的依赖文件 $< 表示第一个依赖文件 $? 表示比目标还要新的依赖文件列表 例子 root_num.exe: root_num.o my_root.o gcc ...

  4. 使用STM32CubeMX生成RTC工程[秒中断]

    现在我们在之前的工程(http://www.cnblogs.com/libra13179/p/7170791.html)中修改 /** ******************************** ...

  5. mysql 索引优化知识整理笔记

    http://blog.csdn.net/zhxp_870516/article/details/8434539 http://www.jb51.net/article/49346.htm https ...

  6. 尚硅谷springboot学习5-主入口类说明

    package com.atguigu; import org.springframework.boot.SpringApplication; import org.springframework.b ...

  7. Servlet之ServletContext获取web上下文路径、全局参数、和Attribute（域）

    1)获取web上下文路径 public void doGet(HttpServletRequest request, HttpServletResponse response) throws Serv ...

  8. map和hasmap的区别

    MAP接口的定义如下: public interface MAP< k , v>      Key 到value 的映射 ,Key不允许重复,每一个key只能映射一个value . Has ...

  9. week5 0.1 安装materializecss

    用ATOM打开项目 App是什么呢?就是App.js 我们将不需要的删掉 用一下materialize(类似bootstrap的东西) 官网https://materializecss.com/ 想用 ...

  10. 24 week 4 安装 docker

    安装docker 出现问题 解决办法https://blog.csdn.net/VOlsenBerg/article/details/70140211 发现链接超时,然后就https://blog.c ...