-
eventBus vue事件总线
2020-09-29 16:42:58eventBus是vue事件总线,所有的组件都可以将自定义事件发布到事件总线,然后在我们所需要的组件中订阅他 1.首先创建一个eventBus.js import Vue from 'vue' // 全局事件总线 const eventBus = new Vue() export ...eventBus是vue事件总线,所有的组件都可以将自定义事件发布到事件总线,然后在我们所需要的组件中订阅他
1.首先创建一个eventBus.js
import Vue from 'vue' // 全局事件总线 const eventBus = new Vue() export default eventBus
2.在main.js全局引入
import eventBus from "。。。。。。/eventBus"; Vue.prototype.$eventBus = eventBus;
3.组件A中发出事件 $emit
this.$eventBus.$emit("aaa",1)
4.组件B中订阅它 $on
this.$eventBus.$on("aaa",res=>{ })
移除事件 $off
this.$eventBus.$off("aaa")
-
vue 组件之间使用eventbus传值
2017-07-15 03:40:19eventbus vue vue-cli 组件传值对于前端
的我们而言,并非是只有写界面才是最大的问题,很多的情况下,我们需要关注的是数据,比如js页面的数据传递等等,学习vue我们也是需要知道怎么去使用数据
当然,使用存储也是可以得,但是并非一定要缓存,当然在vue中有推荐了我们去使用vuex去数据交互,Vuex会让你的Vue代码足够灵活可控,把数据统一存入state, 只允许通过Actions触发Mutations修改。然而,有时候我们的项目并没有复杂到需要用上Vuex。,(我们也不讨论已经废除的vm.$dispatch)很多情况下我们都是需要一个事件的捕获,这时候我们就可以用到vue的eventbus了受用eventbus的方法很是简单,我们需要做三步事情,第一步,我们需要创造一个容器去充当我们的eventbus
第二步,我们需要去抛出,或者说提交我们的事件
第三步,我们去监听我们的那个事件(也许这才是第二部)
首先,我们需要在全局定义我们的eventbus
这里我们定义到了eventbus。这就简单的完成了我们的第一步,当然,全局变量,我想你应该知道定义在哪儿的
接着我们先去抛出这个事件,使用¥。emit去“提交”
怎样,这点都可以理解吧,其次我们经行第三步,去监听
当然。这里已经监听好的。点击事件俺只是个累赘,
接下来我们就要去界面中使用它们了
首先,倒入我们所需要的文件:
这里我使用的是谈transimissionone还有transimissiontwo两个文件‘
接着是定义其次是使用
最后运行我们的项目,查看下效果
这边主要是交大家使用,所以代码就俘虏在下面,主要是四个文件
transimissionone。vue(发送事件的文件)
<template> <div class="transimission1"> <button @click="get">点击发送数值到eventbus中</button> </div> </template> <script> export default { name: "transimission1", methods: { get: function() { console.log("Aaa"); eventBus.$emit('eventBusName', "hellokugou"); } }, } </script> <style> </style>
其次是transimissiontwo(监听者)<template> <div class="transimissiontwo"> <button @click="method1">点击console.log出eventbus的信息 </button> </div> </template> <script> export default { name: "transimissiontwo", methods: { method1: function() { //使用on老监听事件 eventBus.$on('eventBusName', function(val) { console.log("这个是用transimissiontwo的val值为:"+val) }) } } } </script> <style> </style>
接着是我们的中枢。app。vue中使用
请无视掉没用的代码。接着就是定义eventbus了<template> <div id="app"> <click></click> <transimissiontwo></transimissiontwo> <transimissionone></transimissionone> <sendparent @listenertochildevent="getmessagefromchild"></sendparent> <value :locallogo="netlogo"></value> <!--无法监听,说明要在那个组件中--> <button @listenertochildevent="getmessagefromchild">测试能否监听</button> <my_plug_in></my_plug_in> <div class="choose_div"> <ul> <li> <router-link to="/foo">foo页面</router-link> </li> <li> <router-link to="/header">header页面</router-link> </li> <li> <router-link to="/hello">hello页面</router-link> </li> <li style="clear: both;list-style: none;"></li> </ul> </div> <div class="main"> <router-view class="my_router_iew"></router-view> </div> <testmintui></testmintui> </div> </template> <script> import value from './components/value' import click from "./components/click" import my_plug_in from "./components/plug_in" import sendparent from "./components/send_parent" import testmintui from "./components/Test_mint-ui" import transimissiontwo from "./components/transimissiontwo" import transimissionone from "./components/transimissionone" export default { name: 'app', data() { return { netlogo: "主页显示信息到组件中" } }, components: { value, click, my_plug_in, sendparent, testmintui, transimissionone, transimissiontwo, }, methods: { getmessagefromchild: function(data) { console.log(data); } } } </script> <style> body { background-color: #f8f8ff; font-family: 'Avenir', Helvetica, Arial, sans-serif; color: #2c3e50; } ul { width: 12rem; } ul li { list-style: none; } ul li:not(:last-child) { list-style: none; width: 2rem; margin-left: 0.1rem; margin-right: 0.1rem; float: left; text-align: center; background: #2C3E50; color: white; } ul li a { text-decoration: none; font-size: 16px; color: white; line-height: 1rem; text-align: center; } ul li:nth-child { list-style: none; clear: both; } .choose_div { width: 100%; overflow: scroll; } </style>
就这样,很是简单,当然,对于级别的可以使用prop,下回再讲window.eventBus = new Vue();
-
EventBus EventBus is a publish/subscribe event bus for Android and Java. EventBus... simplifies the communication between components decouples event senders and receivers performs well with ...
-
eventBus在vue中的使用
2020-06-09 16:42:141、初始化——全局定义 全局定义,可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上. //main.js //方式一 Vue.prototype.$EventBus = new Vue(); //方式二 window.eventBus = new Vue(); 2、触发...在vue项目中,父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦。这时,使用eventBus通讯,就可以很便捷的解决这个问题。
eventBus可以在全局定义,实现全项目通讯,使用方法也很简单。
1、初始化——全局定义
全局定义,可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上.
//main.js //方式一 Vue.prototype.$EventBus = new Vue(); //方式二 window.eventBus = new Vue();
2、触发事件
//使用方式一定义时 this.$EventBus.$emit('eventName', param1,param2,...) //使用方式二定义时 EventBus.$emit('eventName', param1,param2,...)
3、监听事件
//使用方式一定义时 this.$EventBus.$on('eventName', (param1,param2,...)=>{ //需要执行的代码 }) //使用方式二定义时 EventBus.$on('eventName', (param1,param2,...)=>{ //需要执行的代码 })
4、移除监听事件
为了避免在监听时,事件被反复触发,通常需要在页面销毁时移除事件监听。或者在开发过程中,由于热更新,事件可能会被多次绑定监听,这时也需要移除事件监听。
//使用方式一定义时 this.$EventBus.$off('eventName'); //使用方式二定义时 EventBus.$off('eventName');
-
eventBus+vue-router+element写tab标签页
2020-07-10 09:32:27eventBus.js //新建eventBus实例 import Vue from 'vue' export default new Vue() router.js //meta传递name名 { path: '/version/defDetail', name: 'VersionDefDetail', meta:{ name:'标签1', }, //全局...eventBus.js
//新建eventBus实例 import Vue from 'vue' export default new Vue()
router.js
//meta传递name名 { path: '/version/defDetail', name: 'VersionDefDetail', meta:{ name:'标签1', }, //全局路由守卫 router.beforeEach((to, from, next) => { eventBus.$emit('addTab',{title:to.meta.name,names:to.name,path:to.path,query: Object.keys(to.query).length?to.query:'',params:Object.keys(to.params).length?to.params:''}) next(); }, function (result) { });
App.vue
//标签页 <tabs-com></tabs-com> //组件要加key 如果不加,路由相同,参数不同时 ,不会刷新页面 <router-view :key="key" ref="routerView"/> //计算属性做处理 computed:{ key(){ return this.$route.path + Math.random(); } },
组件页 tabsCom.vue
<template> //如果有数据展示,没有就不展示 <div class="tabs" v-if="editableTabs.length"> <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click='clickTab' class="tabbox"> <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name" > </el-tab-pane> </el-tabs> </div> </template> <script> //引入eventBus import eventBus from '../evenBus' export default { name: 'tabs', props: { }, mounted(){ //第一次eventBus是挂载不上的,路由全局守卫要比组件先运行,所以第一次要先调用 //一下 this.addTab() this.addTab() //设置eventbus eventBus.$on('addTab',(targetName)=>{ let isadd=true this.editableTabs.forEach(item=>{ console.log(item.query,targetName.query) //如果之前添加过了,参数也一样,就不添加 if(item.path===targetName.path&&JSON.stringify(item.query)==JSON.stringify(targetName.query)){ isadd=false //光标归位 this.editableTabsValue=item.name } }) if(!isadd) return //添加数据 let newTabName = ++this.tabIndex + ''; this.editableTabs.push({ title: targetName.title, name:newTabName, names:targetName.names, path: targetName.path, query:targetName.query, params:targetName.params }); this.editableTabsValue = newTabName; }) }, data() { return { editableTabsValue: '2', editableTabs: [], tabIndex: 2 } }, methods: { addTab(){ console.log(this.$route,'dsaddadsa') let newTabName = ++this.tabIndex + ''; this.editableTabs.push({ title: this.$route.meta.name, name:newTabName, names:this.$route.name, path: this.$route.path, query:Object.keys( this.$route.query).length?to.query:'', params:Object.keys( this.$route.params).length?to.params:'' }); this.editableTabsValue = newTabName; }, removeTab(targetName) { let tabs = this.editableTabs; let activeName = this.editableTabsValue ; let active=JSON.parse(JSON.stringify(this.editableTabsValue)) if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { let nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.name; } } }); } this.editableTabsValue =activeName; this.editableTabs = tabs.filter(tab => tab.name !== targetName); //如果删除的标签是自己,则跳转到最后一个标签 if(this.editableTabs.length&&active === targetName){ this.$router.push({path:this.editableTabs[this.editableTabs.length-1].path,query:this.editableTabs[this.editableTabs.length-1]}) } }, //点击跳转路由 clickTab(tab,target){ //这边可以加判断,如果params有值 可以按params传参来传 this.$router.push({path:this.editableTabs[tab.index].path,query:this.editableTabs[tab.index].query}) console.log(this.editableTabs[tab.index].path) } } } </script> <style lang='scss' scoped> .tabs{ z-index: 100; position: relative; width: 100%; background: white; height: 36px; margin-bottom: 16px; margin:-16px -16px 16px ; // overflow: hidden; .tabbox{ position: absolute; left: 0; top:0; } } </style>
-
vue EventBus
2019-08-01 17:25:15要创建新的Vue CLI应用程序,请运行以下命令。确保已安装Vue CLI。 //安装Vue CLI,如果你还没安装它 $ npm install -g @ vue / cli //创建Vue App $ vue init webpack <project-name>... -
vue的事件总线(EventBus)
2020-12-02 20:32:06在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以... -
vue eventbus使用
2019-05-27 13:50:15vue的eventBus 首先在main.js中 Vue.prototype.$eventBus = new Vue() A组件中通过触发事件或者其他什么,然后发射数据 this.$eventBus.$emit('key','data-1232131232132131232'); B组件中接收A组件的数据 ... -
window.eventBus 在Vue中的使用方法
2019-08-09 11:45:15现在main.js里面定义 发射 接受 -
vue eventBus使用
2019-04-25 11:32:001、eventBus.js文件 //用于兄弟组件通信 import Vue from 'vue'; export default new Vue(); 2、页面开启监控 import Bus from '../../../eventBus.js' mounted(){ //被调用方法,先保... -
eventbus使用_Vue3.0Vue Composition API使用体验
2020-11-21 13:13:08作者:吕小鸣https://zhuanlan.zhihu.com/p/143884250本文将之前采用Vue2.6开发的...点击体验[1] Github地址:Vue.js2.6版本todoList[2],Vue.js3.0版本todoList[3]Vue3.x适配大部分Vue2.x的组件配置,也就是说... -
eventbus使用_Vue事件总线(EventBus)使用详细介绍
2020-11-22 16:45:17如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信,就可以考虑Vue中的 事件总线 ,即 EventBus来通信。EventBus的简介EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,... -
vue的eventBus
2018-03-14 17:10:00Vue.prototype.$eventBus = new Vue() A组件中通过触发事件或者其他什么,然后发射数据 this.$eventBus.$emit('key','data-1232131232132131232'); B组件中接收A组件的数据 this.$eventBus.$on('key',... -
vue - EventBus
2020-02-08 18:25:30vue – 事件总线 EventBus EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为组件传递数据的桥梁的,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地... -
Vue EventBus传值的bug(EventBus踩坑)
2020-09-15 19:29:48前言 三个兄弟组件通信 EventBus未取消绑定,重复触发的...在 main.js 中导入 eventbus ,然后将它挂载到 vue 的原型上,这样就可以全局调用了 import bus from './utils/eventBus' Vue.prototype.bus = bus; 其他文 -
eventbus使用_vue 事件总线EventBus的概念、使用以及注意点
2020-11-25 04:21:37vue组件中的数据传递最最常见的就是父子组件之间的...这时就要用到 vue 中的事件总线 EventBus的概念EventBus的简介EventBus又称事件总线,相当于一个全局的仓库,任何组件都可以去这个仓库里获取事件,如图:Event... -
vue EventBus组件通讯
2020-10-30 21:00:18vue组件通讯 EventBus实现 在搭建架子的时候需要将头部组件Header中 按钮点击 来触发侧边栏组件Aside菜单的显示和隐藏的切换。需要将点击切换的状态值给传递到另外的组件中,而这两个组件不是父子关系。这个时候可以... -
Vue的EventBus设置
2020-12-15 11:21:00EventBus可以很方便的进行子组件之间的通信,有时候就可以不用回传到父组件,再转走 设置方法: 我习惯对整个项目使用一个EventBus,方便管理, 创建一个js,命名为EventBus.js,放置位置在@/util/EventBus.js这个... -
Vue EventBus自定义组件事件传递
2020-08-27 07:59:04主要介绍了Vue EventBus自定义组件事件传递,组件化应用构建是Vue的特点之一,本文主要介绍EventBus进行数据消息传递 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
vue eventbus的实现原理
2021-03-01 20:30:01Vue.prototype.$eventBus = new Vue() //2.发布 this.$eventBus.$emit("eventName") //3.订阅 this.$eventBus.$on("eventName",function(){ console.log("go on") }) //4.注意在 组件生命周期 beforeDestroy 内,... -
Vue—EventBus详解
2020-10-03 18:31:42一、概述 Vue组件之间的数据共享问题,针对不同情景,有不同的解决方案。如简单父子组件通信,可以使用props,项目比较复杂,则组件通信可以使用Vuex。对于简单的非父子组件通信,没...Vue.prototype.$eventBus = n -
vue 使用 eventBus
2018-07-18 16:35:07文件 vue-bus.js const install = function (Vue) { const Bus = new Vue({ methods: { emit (event, ...args) { this.$emit(event, ...args); }, ... -
vue中央事件eventBus
2020-09-11 09:33:05vue中央事件总线eventBus的简单理解和使用 公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。 用法如下: 第一步:项目中... -
eventbus使用_Vue3.0--Vue Composition API使用体验
2020-11-21 13:13:08Vue3.0目前已经出了beta版本,并在github上进行了开源,叫做vue-next,本文将之前采用Vue2.6开发的todoList小项目改造成为Vue3.0编写,并介绍一下2.x和3.x之间写法的不同之处。点击体验 Github地址:Vue.js2.6版本... -
vue 事件总线 eventBus
2020-07-14 17:22:30父组件向子组件传递参数用v-bind 子组件向父组件传递参数用...import Vue from 'vue' export default new Vue() 兄弟组件 a组件 import Bus from '@/assets/js/vue-bus.js' methods: { handlerClick(event) { Bus.$ -
vue组件/页面间通信(vue eventbus)
2020-07-29 11:13:24Vue.prototype.$EventBus = new Vue() 分别在页面或组件中注册一个自定义事件和监听事件 this.$EventBus.$emit(自定义事件名, 数据); this.$EventBus.$emit("send","hello") --------------------------------... -
Vue使用EventBus全局组件传值
2021-02-22 14:21:40export const EventBus =new Vue(); 在asss.vue import {EventBus} from './event-bus' tapSend(){ EventBus.$emit('share') } 在bsss.vue引入eventBus 在mounted里监听 import {EventBus } from './event...