vue2子组件之间通信
大多数应用程序要求组件与其父组件或子组件进行通信。推荐的方法是实施一个状态管理解决方案,例如 Vuex(官方的,支持的Flux类实现)甚至VueStash。
但是,对于相对简单的应用程序来说,这可能会带来一些开销,您只需要少量的跨组件通信。这是您可以使用全局事件总线的地方。
为了使您的应用程序中的任何地方可用,您可以将其附加到Vue全局对象。
const EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})
触发全局事件
1.您现在可以触发组件中的事件:
export default {
name: 'my-component',
methods: {
triggerMyEvent () {
this.$bus.$emit('my-event', { ... pass some event data ... })
}
}
2.或直接在您的HTML模板
<div>
<button @click="$bus.$emit('my-event')">Click to trigger event</button>
</div>
监听事件
事件可以在任何组件中收听。
export default {
name: 'my-component',
created () {
this.$bus.$on('my-event', ($event) => {
console.log('My event has been triggered', $event)
})
}
}
包括事件总线组件本身
const EventBus = new Vue({
created () {
this.$on('my-event', this.handleMyEvent)
},
methods: {
handleMyEvent ($event) {
console.log('My event caught in global event bus', $event)
}
}
})