vue中 $bus 一般与 $emit、 $on、 $off 连用,一般用在任意组件间的通信,即 $bus 用来传递非父子关系的数据。
如两个组件之间传递数据:
子组件1

this.$bus.$emit("hello",param);

子组件2

this.$bus.$on("hello",(param)=>{
});

1、$emit

  • $emit(‘自定义事件名’,要传递的数据);
  • 触发当前实例上的自定义事件,要传递的数据会传给监听器;

2、$on

  • $on(‘自定义事件名’,callback);
  • 监听当前实例上自定义事件,callback回调$emit要传递的数据;

注意:$emit 和 $on 的事件必须在一个公共的实例上,才能够触发。

3、实例事件
实例事件就是在构造器外部调用构造器内部的数据。

4、实例
在Student组件中提供数据给另一个School组件

<template>
    <div class="student">
        <h2>学生姓名:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
        <button @click="sendStudentName">把学生名给School组件</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'曹操',
                sex:'男',
            }
        },
        methods: {
        	//提供发送数据
            sendStudentName(){        
                this.$bus.$emit('hello',this.name)
            }
        },
    }
</script>

在School组件中使用事件总线,接收数据。School组件想接收数据,则在School组件中给 $bus绑定事件,事件的回调则留在School组件自身。

<template>
    <div class="school">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'交通学院',
                address:'上海',
            }
        },
        mounted() {
        	//绑定当前事件(这里以hello为例)
            this.$bus.$on('hello',(data)=>{      
                console.log('我是School组件,收到了数据',data)
            })
        },
        //收尾操作,销毁
        beforeDestroy(){        
            this.$bus.$off('hello')  //$off解绑当前组件所用到的事件
        }
    }
</script>

其中,$off 解绑当前组件所用到的事件。

5、小结
$emit写在子组件 / 兄弟组件:

  methods: {
	bgClick() {
	      bus.$emit('getMsg1')
		  bus.$emit('setIndex1')
	 },
    ...
  },

$on写在父组件 / 兄弟组件:

  mounted() {
    bus.$on('getMsg1', this.getMsg);
    bus.$on('setIndex1', this.setIndex);
  },
  beforeDestroy() {
    bus.$off('getMsg1');
    bus.$off('setIndex1');
  },
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐