vue 使用$bus

2024-09-06

Vue中的$Bus使用

Vue中的$Bus使用将Bus单独抽离成一个文件 Bus.js import Vue from 'vue'; let Bus = new Vue(); export default Bus; 创建两个兄弟组建 C2.vue <template> <view> <h1>c2</h1> </view> </template> <script> // 引入Bus import Bus from '@/util/Bus'; ex

Vue 中Bus使用

使用:兄弟组件之间传值: 安装: npm install vue-bus 在main.js 中引入vuebus: import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); 在组件中使用触发事件: this.$bus.emit("onslected",params) 应对事件: mounted:function(){ this.$bus.on("onslected",function(

vue总线bus传值的一些问题

动态组件中用总线Bus的坑在我们的项目总难免会遇到用动态组件,这里就拿vue官方的例子为例,我们欲在组件中添加总线bus(其实官方推荐的vuex更好用,但是有时候我们只需要传一个小状态,不需要用vuex),首先要mian.js 中创建一个总线Bus(当然这里一般要把Bus封装一下放在一个单独的js中,这里单纯只是为了演示,就在main.js中创建一个全局的EventBus) import Vue from 'vue' import App from './App' import router

20、解决Vue使用bus兄弟组件间传值，第一次监听不到数据

1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from "@/assets/bus.js"; methods: { handleClick: function () { this.$nextTick(function () { //解决第一次监听不到数据 Bus.$emit('sendData', ‘我是传递的数据’) }) } } B组件:

vue 里bus的使用

兄弟组件之间进行传值(非父子组件): 安装:npm install vue-bus 在main.js中引入vue-bus import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); 在组件中使用: A组件触发事件: this.$bus.emit("parameterName",params): B组件接收事件: this.$bus.on("parameterName",function(

vue中bus.$on事件被多次绑定

问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on ) bus.$off('pagechangep'); //先解绑,不然会多次出发 bus.$on('pagechangep',function(i){ that.publishpageTo(i); }); 解决办法二:注册的总线事件(Bus)要在组件销毁时(beforeDestroy/destroyed)

vue中$bus的传参的坑

今天在做项目的时候碰见一个坑就是B页面有个点击事件需要触发完然后跳转到A页面,接着页面跳转过去后再A页面的create生命周期中利用on监听事件的改变,接着赋值给data里面某个数据,但是奇怪的问题是赋值成功后没有引起页面的同步更新,,,,,,,,,,,,,,,,,,, 终于找到一种解决方法,代码如下

vue 2 使用Bus.js进行兄弟(非父子)组件通信简单案例

vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递. 首先需要在任意地方添加一个bus.js 在bus.js里面写入下面信息 import Vue from 'vue' 2 export default new Vue; 在需要通信的组件都引入Bus

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总线

有时候两个组件也需要通信(非父子关系).当然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中的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'

vue bus方式解决非父子组件间的传值

对于非父子组件之间的传值通常使用VUEX 和总线等方式解决这里我聊聊发布订阅模式(总线) <body> <div class="app"> <child content = "dell"></child> //这两个子组件之间可以互相传值 <child content = "lee"></child> </div> </body> <scri

Vue状态管理-Bus

1.父子组件之间进行通讯: 父组件通过属性和子组件通讯,子组件通过事件和父组件通讯.vue2.x只允许单向数据传递. 先定义一个子组件AInput.vue: <template> <div> <input @input="handleInput" :value="value"/> </div> </template> <script> export default { name:'AInput'

Vue的this.$root.Bus.$on事件被多次触发、多次监听的问题

前端vue项目中,各个组件(非父子关系也可)之间可以通过Bus进行事件通信. main.js中: import Vue from 'vue' const Bus = new Vue(); const app = new Vue({ el: '#app', data: {Bus}, router, components: {App}, template: '<App/>' 进过如上配置后即可在各个组件中通过如下: this.$root.Bus.$emit("事件名", 参数1

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

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

Vue组件通信之Bus

关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱.这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦.并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题. 官方推荐的状态管理方案是 Vuex.不过如果项目不是很大,状态管理也

Vue状态管理之Bus

一般在项目中,状态管理都是使用Vue官方提供的Vuex 当在多组件之间共享状态变得复杂时,使用Vuex,此外也可以使用Bus来进行简单的状态管理 1.1 父组件与子组件之间的通信 vue.config.js文件内容 const path = require('path') const resolve = dir => path.join(__dirname,dir) const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-

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/作用域slot/动态组件）

一.Vue非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 我们在之前已经知道了父子传值.父组件传递过来了的值,在子组件通过props接受,然后就可以使用了. 也学过了隔代传值,均是通过props逐层传递实现.那么,兄弟节点之间怎么传值呢? 那就是通过bus啦. 通过bus实现方式如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

vue中非父子组件的传值bus的使用

非父子之间的组件传值,可以使用vuex.简单的状态管理,也可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定义:main.js window.eventBus = new Vue() 在A页面的事件中触发: eventBus.$emit('todo', '123') 在B页面的created中开始监听,越早监听越好: eventBus.$on('todo', (params) => {

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue 使用$bus

热门专题