【vue Bus总线】的更多相关文章

vue Bus总线

有时候两个组件也需要通信(非父子关系).当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线. 参考:http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1 例子:https://segmentfault.com/q/1010000007491994 <div id="app"> <c1></c1> <…

vue组件中—bus总线事件回调函数多次执行的问题

在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实现方式,参考:JavaScript实现自定义对象的自定义事件. 其基本思想就是:设计一个原型对象,作为基类,其重点属性包括:一个_events对象数组属性,一个addEventListener方法,一个fireEvent方法,具体用途如下: _eventys:对象数组属性,用于存储不同事件的处理函数…

vue bus 的使用

简单的状态管理,可以用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(param…

vue bus 中央事件总线

1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() //  全局引入mai.jsvue中央事件总线 import eventBus from './bus/eventBus' Vue.prototype.$eventBus=eventBus 2.使用 在A组件里定义 在mounted生命周期里通过this.$eventBus.$on('自定义事件名',回调函数)监听. 回调函数里可以接受参数…

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

1.在main.js中注册全局的bus  Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用:this.bus.$emit('自定义事件名',data) methods:{        handleClicks(){        this.bus.$emit('openMenu',true)       } } 父组建使用:  this.bus.$on("自定义事件名", msg => {}) mounted() {    this.bus…

Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="root"> <child content="Nay"></child> &…

vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>非父子组件之间的传值</title> </head> <body> <div id="app"> <child content="Dell"></child> <child content=&…

vue 事件总线（bus）

1.全局引入bus Vue.prototype.$bus = new.Vue() 2.组件间传值使用(在发送事件时接收组件会实时接收到, 可以用做兄弟组件间相互传值, 但页面跳转组件间有问题 通过$emit发送,$on接收) <div style="float: left; width: 15%; height: 100%;"> <div v-for="(item, index) in list" :key="index" @c…

Vue事件总线（eventBus）$on()会多次触发解决办法

项目中使用了事件总线eventBus来进行两个组件间的通信, 使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue'export default new Vue();在需要通信的两个组件中分别import import bus from "common/utils/eventBus";然后就可以通过emit.on进行通信:如下: 一个组件中发射bus.$emit('SUBMITSEARCH_PEOPLE',this.sea…

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'…