[JavaScript知识库]vue---＞EventBus同级组件之间传递数据

//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>