vc.$emit(‘my-event’,…params)
<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);
}
}