vue——bus总线

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

参考：vue用公共组件页面传值_Vue 解决兄弟组件之间传值问题_funny 灵魂的博客-CSDN博客

　　vue Bus总线 - fanlinqiang - 博客园 (cnblogs.com)

　　vue.js之路(4)——vue2.0s中eventBus实现兄弟组件通信_YuuyaRin的博客-CSDN博客

　　vue中使用$bus - 古墩古墩 - 博客园 (cnblogs.com)

　　浅谈Vue.use - SegmentFault 思否

使用场景：非父子组件之间的通信，当然也可以使用vuex，但小型项目可以考虑使用bus

使用方式：

方式一. 组件调用时先引入

但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信

Bus.js：

import Vue from 'vue'
const Bus = new Vue()
export default Bus

组件1：

import Bus from 'util/Bus'
export default {
    data() {
        return {
            .........
            }
      },
    created() {
    /* 
     * 必须要在 vue 的created钩子函数中来触发这个bus，在页面还没加载的时候先触发它然后拿到数据
     * 在created中执行，可以避免很多坑, 例如触发bus无法拿到数据等问题
     */
       Bus.$on('log', val=> { 
          console.log(val)
        });    
    },  
    beforeDestoyed() {
       Bus.$off('log'); // 销毁bus方法'log'，是避免方法“冗余”。若不清除这个方法，将会出现多个bus触发时，每次都会将这个方法注入在这个vue的生命周期中
    }   
}

组件2：

import Bus from './Bus'
export default {
    data() {
        return {
            .........
            }
      },
  methods: {
        ....
        Bus.$emit('log', 120)
    },
  }

方式二. 直接在vue实例上绑定

main.js：

Vue.prototype.$bus = new Vue();

组件1：

created() {
    this.$bus.$on('log', val => {
      console.log(val);
    });
  },
beforeDestroyed() {
    this.$bus.$off('log');
  }

组件2：

this.$bus.$emit('log', 120);

方式三. 插件化

Bus.js:

import Bus from 'vue';
let install = function(Vue) {
  Vue.prototype.$bus = new Bus(); 
};
export default { install };

main.js：

import Vue from 'vue';
import Bus from 'util/Bus';
... ...
Vue.use(Bus); // 调用Bus中的install方法
... ...

组件1：

created() {
    this.$bus.$on('log', val => {
      console.log(val);
    });
  },
beforeDestroyed() {
    this.$bus.$off('log');
  }

组件2：

this.$bus.$emit('log', 120);

以上是 vue——bus总线 的全部内容， 来源链接： utcz.com/z/378410.html

回到顶部