vue2笔记7 自定义事件，全局事件总线，消息发布订阅

<template>
<MyComp ref="myComp" 
	v-on:my-event="alert('on my-event!')" 
	@click.native="alert('on click!')"
/>
</template>
<script>
export default {
	mounted() {
		let vc = this
		this.$ref.myComp.$on('my-event',function() {
			// 注：此处this指向myComp
		})		
		this.$ref.myComp.$on('my-event',() => {
			// 注：此处this指向vc
		})		
	}
}
</script>

const vm = new Vue({
    render: h => h(App),
    beforeCreate() {
    	// 此钩子执行时还未解析模板，此时在Vue原型中注册$bus，即可在所有组件中通过this.$bus获取到vm
        Vue.prototype.$bus = this
    }
}).$mount('#app')

methods: {
	onMyGlobalEvent(){}
},
mounted() {
	this.$bus.$on('my-global-event', this.onMyGlobalEvent)
},
beforeDestory() {
	this.$bus.$off('my-global-event', this.onMyGlobalEvent)
}

import pubsub from 'pubsub-js'
export default {
  ...
  methods: {
    onClick() {
      // 发布
      pubsub.publish('my-message', 666);
    }
  },
  mounted() {
    // 订阅
    this.pubid = pubsub.subscribe('my-message', (msgName, data) => {
      // 注：如果使用function函数此处this为undefined
      console.log(msgName, data)
    })
  },
  beforeDestroy() {
    // 取消订阅
    pubsub.unscribe(this.pubid);
  }
}