精华内容
下载资源
问答
  • eventBus vue事件总线

    2020-09-29 16:42:58
    eventBusvue事件总线,所有的组件都可以将自定义事件发布到事件总线,然后在我们所需要的组件中订阅他 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:19
    eventbus 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中使用

    <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>
    请无视掉没用的代码。接着就是定义eventbus了

    window.eventBus = new Vue();
    就这样,很是简单,当然,对于级别的可以使用prop,下回再讲

    展开全文
  • 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 ...
  • eventBusvue中的使用

    千次阅读 2020-06-09 16:42:14
    1、初始化——全局定义 全局定义,可以将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.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 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以...
  • vue eventbus使用

    2019-05-27 13:50:15
    vueeventBus 首先在main.js中 Vue.prototype.$eventBus = new Vue() A组件中通过触发事件或者其他什么,然后发射数据 this.$eventBus.$emit('key','data-1232131232132131232'); B组件中接收A组件的数据 ...
  • 现在main.js里面定义 发射 接受
  • vue eventBus使用

    2019-04-25 11:32:00
    1、eventBus.js文件 //用于兄弟组件通信 import Vue from 'vue'; export default new Vue(); 2、页面开启监控 import Bus from '../../../eventBus.js' mounted(){ //被调用方法,先保...
  • 作者:吕小鸣https://zhuanlan.zhihu.com/p/143884250本文将之前采用Vue2.6开发的...点击体验[1] Github地址:Vue.js2.6版本todoList[2],Vue.js3.0版本todoList[3]Vue3.x适配大部分Vue2.x的组件配置,也就是说...
  • 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信,就可以考虑Vue中的 事件总线 ,即 EventBus来通信。EventBus的简介EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,...
  • vueeventBus

    2018-03-14 17:10:00
    Vue.prototype.$eventBus = new Vue() A组件中通过触发事件或者其他什么,然后发射数据 this.$eventBus.$emit('key','data-1232131232132131232'); B组件中接收A组件的数据 this.$eventBus.$on('key',...
  • vue - EventBus

    2020-02-08 18:25:30
    vue – 事件总线 EventBus EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为组件传递数据的桥梁的,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地...
  • 前言 三个兄弟组件通信 EventBus未取消绑定,重复触发的...在 main.js 中导入 eventbus ,然后将它挂载到 vue 的原型上,这样就可以全局调用了 import bus from './utils/eventBus' Vue.prototype.bus = bus; 其他文
  • vue组件中的数据传递最最常见的就是父子组件之间的...这时就要用到 vue 中的事件总线 EventBus的概念EventBus的简介EventBus又称事件总线,相当于一个全局的仓库,任何组件都可以去这个仓库里获取事件,如图:Event...
  • vue EventBus组件通讯

    2020-10-30 21:00:18
    vue组件通讯 EventBus实现 在搭建架子的时候需要将头部组件Header中 按钮点击 来触发侧边栏组件Aside菜单的显示和隐藏的切换。需要将点击切换的状态值给传递到另外的组件中,而这两个组件不是父子关系。这个时候可以...
  • VueEventBus设置

    2020-12-15 11:21:00
    EventBus可以很方便的进行子组件之间的通信,有时候就可以不用回传到父组件,再转走 设置方法: 我习惯对整个项目使用一个EventBus,方便管理, 创建一个js,命名为EventBus.js,放置位置在@/util/EventBus.js这个...
  • 主要介绍了Vue EventBus自定义组件事件传递,组件化应用构建是Vue的特点之一,本文主要介绍EventBus进行数据消息传递 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue eventbus的实现原理

    2021-03-01 20:30:01
    Vue.prototype.$eventBus = new Vue() //2.发布 this.$eventBus.$emit("eventName") //3.订阅 this.$eventBus.$on("eventName",function(){ console.log("go on") }) //4.注意在 组件生命周期 beforeDestroy 内,...
  • VueEventBus详解

    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:05
    vue中央事件总线eventBus的简单理解和使用 公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。 用法如下: 第一步:项目中...
  • Vue3.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.prototype.$EventBus = new Vue() 分别在页面或组件中注册一个自定义事件和监听事件 this.$EventBus.$emit(自定义事件名, 数据); this.$EventBus.$emit("send","hello") --------------------------------...
  • export const EventBus =new Vue(); 在asss.vue import {EventBus} from './event-bus' tapSend(){ EventBus.$emit('share') } 在bsss.vue引入eventBus 在mounted里监听 import {EventBus } from './event...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 980
精华内容 392
关键字:

eventbusvue

vue 订阅