vue2筆記7 自定義事件，全局事件總線，消息釋出訂閱

自定義事件

自定義元件觸發事件

vc.$emit(‘my-event’,…params)

綁定自定義元件事件

• 如需綁定自定義元件的原生事件，需要加上.native修飾符，否則将作為自定義實作處理
• 如果綁定自定義元件的原生事件，其實是綁定了自定義元件最外層元素的對應原生事件

<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)
}           

複制

全局消息釋出訂閱

pubsub-js

• 安裝

npm i pubsub-js

• 使用

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);
  }
}           

複制