//event-bus.js
import 'Vue' from 'vue'
//第一种使用方式,需要在每个组件中引入EventBus
export const EventBus = new Vue()
//第二种使用方式,将EventBus挂载到全局上,就可以直接使用this.$bus.$emit() 或 this.$on() 来调用
//记得要在main.js中引入 import './util/event-bus.js'
const EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
$bus:{
get:function(){
return EventBus
}
}
})
//a组件
<template>
<div>
a组件
<Button @click="send">send</Button>
</div>
</template>
<script>
import { EventBus } from '../util/event-bus'
export default {
data() {
return {
msg:'hellow,我是a组件'
}
},
methods:{
send() {
EventBus.$emit('msg',this.msg)
}
}
}
</script>
//b组件
<template>
<div>
b组件
{{ msg }}
</div>
</template>
<script>
import { EventBus } from '../util/event-bus'
export default {
data() {
return {
msg:''
}
},
mounted() {
EventBus.$on('msg',msg => {
console.log(msg);
this.msg = msg
})
},
// 注意;EventBus是有弊端的,多个位置使用会造成混淆。因为EventBus是全局的,所以在组件销毁的时候要注销掉
beforeDestroy() {
EventBus.$off('msg',{});
}
}
</script>
vue--->EventBus同级组件之间传递数据
最新推荐文章于 2023-05-22 11:01:33 发布