Vue中 eventBus 的使用

EventBus事件总线

1.创建EventBus

//新建一个eventBus.js的文件 代码如下
import Vue from "vue";
export default new Vue();

文件位置没有特殊要求

2.需要存储值的地方

2.1.首先引入

<template>
	...
  <div @click="sendMsg">给兄弟组件传递参数</div>
  ...
</template>

<script>
import eventBus from '../eventBus'
export default {
	...
  methods: {
  ...
    sendMsg() {
      eventBus.$emit("share", "传递数据")
    }
  },
}
</script>

2.2 使用

<template>
	<div>{{ getMsg }}</div>
</template>

<script>
import eventBus from '../eventBus'
export default {
	...
	created() {
		eventBus.$on('share', (value:) => {
      		this.getMsg = value
    	})
	},
	beforeDestroy() {
		eventBus.$of("share", ()=> {})
	}
}
</script>

3. 注意事项

1. 传递方可以在点击的时候使用eventBus.$emit('方法名', 传递的参数)
2. 接收方在created或者mounted中使用eventBus.$on('方法名', (参数) => {})
3. 接收方在beforeDestroy中使用eventBus.$of("share", ()=> {})解绑