精华内容
下载资源
问答
  • vue Bus总线

    2020-07-29 17:14:24
    vue中我们经常遇到组件之间的...在一些简单的项目中,我们没有必要使用Vuex,此时可以使用 公共事件总线(Event Bus) 来处理 1、创建事件总线 创建一个名为 bus.js 的JS文件 import Vue from 'vue'; export default n

    vue中我们经常遇到组件之间的通信,通常的通信方式有 父 → 子子 → 父兄弟组件 之间的通信。通常处理方式如下:

    • 父 → 子:props传递数据 / vuex;

    • 子 → 父:bus事件总线 / vuex;

    • 兄弟组件:bus事件总线 / vuex;

    在一些简单的项目中,我们没有必要使用Vuex,此时可以使用 公共事件总线(Event Bus) 来处理

    1、创建事件总线

    创建一个名为 bus.js 的JS文件

    import Vue from 'vue';
    export default new Vue();
    

    或者直接在项目中的 main.js 初始化 Bus

    //全局事件总线
    Vue.prototype.$Bus = new Vue()
    

    2、组件中使用

    //  one.vue 中绑定监听方法
    import Bus from 'bus.js';
    
    methods: {
        busOn () {
            Bus.$on('test', params =>{
                ...
            })  
        }
    }
    
    //  two.vue 中触发方法
    import Bus from 'bus.js';
    
    methods: {
        busEmit () {
            Bus.$emit('test', params)  
        }
    }
    
    全局事件总线
    //  one.vue 中绑定监听方法
    methods: {
        busOn () {
            this.$Bus.$on('test', params =>{
                ...
            })  
        }
    }
    
    //  two.vue 中触发方法
    methods: {
        busEmit () {
            this.$Bus.$emit('test', params)  
        }
    }
    

    注意 :公共事件 Bus 使用不善,会是一种灾难。我们都知道vue是单页应用,如果你在某一个页面刷新了之后,与之相关的Bus会被移除,这样就导致业务走不下去。如果业务有反复操作的页面,这样Bus事件有可能被多次绑定,造成方法会被多次调用,也是一个非常大的隐患。通常我们会在vue页面销毁 (beforeDestroy/destroyed)时,同时移除 Bus 事件监听。

    关于Bus事件被多次绑定的问题,可以参考 [ https://www.jianshu.com/p/4bf32e518750 ]文章来处理问题。

    展开全文
  • Vue BUS总线

    2020-12-22 10:27:44
    Vue Bus 总线 作用:在vue中实现非父子组件之间通信。 场景:bus适合小项目、数据被更少组件使用,或者数据量少的项目。 本质:实际上是一个发布订阅者模式的使用,利用 vue 的自定义事件机制,在触发时通过 $emit ...

    Vue Bus 总线

    作用:在vue中实现非父子组件之间通信。

    场景:bus适合小项目、数据被更少组件使用,或者数据量少的项目。

    本质:实际上是一个发布订阅者模式的使用,利用 vue 的自定义事件机制,在触发时通过 $emit 向外发布一个事件,而在需要使用的页面,通过 $on 监听事件或者说是注册事件。是一个不具备DOM的组件。它就像是所有组件共用相同的事件中心,用它来作为沟通桥梁,可以向该中心注册发送事件或接收事件。

    实现:

    1. 使用一个空的 Vue 实例(bus.js)作为中央事件总线。

      // bus.js
      import Vue from 'vue';
      const bus = new Vue();
      export default bus
      

      然后在需要使用的组件中引入

    2. 把 bus 定义在 vue 的 prototype 上,在全局使用。

      同样的我们在创建 bus 后,可以在 main.js 中去引入 bus,然后将其挂载在vue实例上。

      import bus from './bus.js'
      
      Vue.prototype.$bus = bus
      
    3. 或者使用插件 vue-bus 也可以。

      npm i vue-bus --save
      

      在 main.js 中引入:

      import VueBus from 'vue-bus'
      
      Vue.use(VueBus)
      
    4. 手动实现 Bus 类。

      class Bus {
          constructor() {
              // 定义回调函数
              this.callback = {}
          }
       	// 事件注册监听   
          $on(name, fn) {
              this.callback[name] = this.callback[name] || []
              this.callback[name].push(fn)
          }
          // 触发事件
          $emit(name,args) {
              if (this.callback[name]) {
                  // 遍历所有的 callback
                  this.callback[name].map(cb => cb(args))
              }
          }
          // 移除事件
          $off(name) {
              if (this.callback[name]) {
                  delete this.callback[name]
              }
          }
      }
      

      使用:

      const bus = new Bus()
      bus.$on('fn1', function (msg) {
          alert(`订阅的消息是:${msg}`)
      })
      bus.$emit('fn1', 'Hello World!')
      

    注意:注册的总线事件要在组件销毁时卸载,否则会多次挂载,造成触发一次但多个响应的情况。

    如果想要移除事件的监听,如下:

    // 移除应用内所有对此事件的监听
    bus.$off('fn1')
    bus.$off('fn1', {})
    // 移除所有事件频道
    bus.$off()
    

    那么在实际使用时,我们在需要触发组件里使用 $emit 来触发,并传递相关的值给监听器回调,而在需要接收的页面里使用 $on 去监听对应的自定义事件,并在回调函数中接收传来的值。

    // A组件
    this.bus.$emit('fn', { value: 'test' })
    
    // B组件
    this.bus.$on('fn', data => {
        console.log(data);  // { value: "test" }
    })
    

    当在 B 组件中的 created 生命周期函数中调用了 $on 后,对应的事件就会被监听,当 e m i t 触 发 后 , emit 触发后, emiton 这边就会对应的产生响应。

    公众号:Coder 杂谈,欢迎关注
    在这里插入图片描述

    展开全文
  • Vue组件传值之bus总线

    2021-01-08 17:41:17
    vue中组件传值有多种方式,我们最常用的是props,当然还有vuex,但是对于简单的场景,vuex显得过于复杂了,今天我们介绍另一种组件传值的方式——Bus总线 正文 使用一个空的Vue实例作为中央事件总线。实际应用中,...
  • vue bus总线

    2019-09-23 05:46:34
    问题:解决兄弟组件通信的问题,当然你也可以选择vuex 首先三个组件main.vue, child1.vue, child2,...方法一:使用一个空的Vue实例(bus.js)作为中央事件总线bus.js import Vue from 'vue'; const bus = ne...

    问题:解决兄弟组件通信的问题,当然你也可以选择vuex

    首先三个组件main.vue, child1.vue, child2,vue

    注意:注册的总线事件要在组件销毁时卸载,否则会多次挂载,造成触发一次但多个响应的情况

    方法一:使用一个空的Vue实例(bus.js)作为中央事件总线。

    bus.js
    import Vue from 'vue';
    const bus = new Vue();
    export default bus;
    main.vue
    <template>
      <div>
        <child1></child1>
        <child2></child2
      </div>
    </template>
    <script>
      export default {
        name: 'TestBaiDu',
        components: {
          child1: () => import("@/components/child1"),
          child2: () => import("@/components/child2")
        }
      }
    </script>
    child1.vue
    <template>
      <div>
        这是一个A组件
        <el-button type="primary" @click="clickEve">点击</el-button>
      </div>
    </template>
    
    <script>
    import bus from './bus'
    export default {
      data () {
        return {}
      },
      methods: {
        clickEve () {
          bus.$emit('getMessage', 'qqqq')
        }
      }
    }
    </script>
    child2.vue
    <template>
      <div>
        这是一个B组件
      </div>
    </template>
    
    <script>
    import bus from './bus'
    export default {
      data () {
        return {}
      },
    methods:{
    showMsg () {
     
        console.log('msg', msg)
      }
      },
      created () {
        bus.$on('getMessage', this.showMsg ) 
      },
    beforDestory () {
      this.$off('getMessage', this.showMsg)
    }
    }

    </script>

    方法二:把bus定义在vue的prototype上,在全局都可以使用

    main.js中加入如下代码

    const bus = new Vue()

    Vue.prototype.$bus = bus

    这样我们就不需要再自己写bus.js引入了,就可以直接再组建中使用

    this.$bus.on(),this.$bus.$emit(),this.$bus.$off()

     

    方法三:使用插件vue-bus

    安装  npm install vue-bus --save

    main.js中引入   

    import VueBus from 'vue-bus';//中央事件总线

    Vue.use(VueBus)

    这样我们就不需要再自己写bus.js引入了,就可以直接再组建中使用

    this.$bus.on(),this.$bus.$emit(),this.$bus.$off()

     

     
     

    转载于:https://www.cnblogs.com/yangxiaoying/p/11532867.html

    展开全文
  • vue总线机制(bus)

    千次阅读 2019-12-07 17:06:24
    vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同。 bus适合小项目、数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布...

    vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同。

    bus适合小项目、数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件。

    vuex适用中大型项目、数据在多组件之间公用的情况。

    简单介绍两者的区别之后,就要介绍下我在一个项目中遇到的一个场景了,这个场景使用bus可能更加适合些:

    管理后台项目,这种布局是比较常见的,左侧是菜单栏,上面是面包屑导航栏,中间是子路由渲染的页面内容。在页面跳转时我们通过query传值是比较常见的,这个时候 我们点击导航栏回退的时候 如何获取到前面query传的值呢?

    你可能会想到把传递的参数放到vuex来存储,点击导航栏的时候来获取,但每个页面传递参数数量是不定的,这个时候使用bus总线机制可能会比vuex更好些。bus使用方法如下:

    //main.js
    
    Vue.prototype.bus = new Vue();
    new Vue({
      render: h => h(App)
        ...
    }).$mount('#app');
    /*
    *通过把一个vue实例赋于Vue构造函数原型上的一个属性bus(当然起任何名称都是可以的)
    *而每个Vue实例都是有$emit和$on方法的
    *由于bus属性在Vue原型上,根据原型链查找规则,在页面中我们就可以通过 this.bus.$emit 和 
    *this.bus.$on来进行跨组件通信了
    */
    //导航栏组件中
    //点击事件发生时发布一个事件
    this.bus.$emit('even-name',args1, arg2 , ...)
    
    //这里我们可以把点击导航的相关信息携带出去
    //路由显示页面中
    this.bus.$on('event-name', (...args) => {
        //根据参数来进行路由跳转
    })

    这个事件监听 和 路由跳转的逻辑我们可以弄成一个mixins进行复用。到这样就完成了。

    但是这样还是有点麻烦,每个页面都需要引入mixins,有没有更好的办法呢?答案是肯定的。我们项目导航栏是通过路由meta循环出来的,每项有对应导航栏的路由,结构如下:

     {
        path: '/xxxx',
        component: xxxx,
        meta: [
          {
            name: '导航1'
          }, 
          {
            name: '导航2',
            url: '我是导航2的路由'
          },
          {
            name: '导航3',
            url: '我是导航3的路由'
          },
          {
            name: '导航4',
          }
        ]
      },

    在思索时我忽然发现每个导航栏的index、导航栏长度length、及router.go方法之间有一个规律,那就是我们可以把index + 1 - length作为router.go的参数,从而不用再关心query参数了,而且只需要在导航栏组件操作一次就可以了,完美!

    //导航栏组件点击事件处理函数中
    
    if (url) {
       const meta = this.$route.meta;
       this.$router.go(index + 1 - meta.length)
    }

     

    展开全文
  • vuebus总线使用小结

    2020-10-28 11:03:44
    1.emit和emit和emit和on事件必须使用一个空的Vue实例作为中央事件总线的实例上,才能够触发,否则会出现子组件$emit后父组件没有监听到函数的变化的情况。 新建一个文件bus.js 代码如下: import Vue from 'vue' ...
  • 文章目录介绍测试跳转vue Bus总线 介绍 Mock.js的特点: 1,前后端分离 让前端攻城师独立于后端进行开发。增加单元测试的真实性,通过随机数据,模拟各种场景。 2,开发无侵入 不需要修改既有代码,就可以拦截 Ajax ...
  • 当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。 参考:http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&amp;fps=1 例子:...
  • 问题:路由切换后,事件总线的方法被多次执行。 解决:在beforeDetory钩子里使用$off解绑事件。...经过我的多次排查,发现Vue上的bus总线的事件绑定方法被多次执行,而我却找不到解决的头绪… 我使用vue-router路由、
  • 众所周知,vue提供了很多套组件间传值的方法,父子组件直接用props和$emit就好,大型项目则用vuex,但有一种更适合在小项目中使用的非父子组件传值方法,即bus总线机制。它的用法的实现原理是前端面试中常考的。在第...
  • vuebus总线

    2019-09-20 15:07:23
    bus声明 global.bus = new Vue() 事件发送 controlTabbar () { global.bus.$emit('pickUp', 'ddd') }, 事件接收 global.bus.$on('pickUp', (res) => { this.is...
  • Vue中央事件总线bus

    2019-04-19 11:08:49
    大家都知道,一个 ,可以作为一个简单的组件传递数据,用于解决...首先,我们使用vue-cli创建一个项目vue-bus, 在src目录下,新建vue-bus.js文件,vue-bus插件像vue-router 和 Vuex一样,给Vue对象添加一个属性$bus...
  • bus.js import Vue from 'vue' export default new Vue 2.在需要传递的两个组件中都引入bus.js import bus from '../util/bus.js' 3.定义一个方法传递msg <button @click="go">传递消息<...
  • vue项目 全局传值Bus总线

    千次阅读 2019-07-05 10:46:40
    vue项目中我们常常需要传值,但是有时候需要传值的组件并不是父子组件,哪怎么办呢? 那就需要我们今天的主角 Bus vuex

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,206
精华内容 2,082
关键字:

vuebus总线

vue 订阅