Vue中适用于任意组件间的一种通信方式
前言
例如:针对图中的A组件和B-a组件,它们既不是父子组件,也不是兄弟组件。此时,我们可以考虑使用全局事件总线进行值传递。
具体使用方式如下:
假设任意组件B中需要任意组件A中的某些数据
一、main.js中安装事件总线
new Vue({
el: '#app',
router,
components: { App },
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
},
template: '<App/>'
})
二、组件A中发送数据
// ComponentA.vue
<template>
<div>
<button @click="sendMessage">发送数据</button>
</div>
</template>
<script>
export default {
name: '',
methods: {
sendMessage() {
// 发送数据
this.$bus.$emit('eventBus', '数据内容')
}
}
</script>
三、组件B中接收数据
// ComponentB.vue
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
message: ''
}
},
mounted() {
// 接收数据
this.$bus.$on('eventBus', this.receiveMessage)
},
methods: {
receiveMessage(val) {
this.message = val
console.log(this.message) // '数据内容'
}
}
}
</script>
四、组件B中销毁全局事件总线
为避免免造成内存泄漏,使用时要注意销毁全局事件总线,在哪里接收数据,就在哪销毁,
销毁不影响二次使用
// ComponentB.vue
<script>
export default {
name: '',
data() {
return {
message: ''
}
},
mounted() {
this.$bus.$on('eventBus', this.receiveMessage)
},
// 销毁
beforeDestroy() {
this.$bus.$off('eventBus')
},
methods: {
receiveMessage(val) {
this.message = val
console.log(this.message) // '数据内容'
}
}
}
</script>
总结
B组件接收A组件的值,4个步骤:
1. main.js中安装全局事件总线
2. 组件A中用this.$bus.$emit('事件名',val)发送要传的数据
3. 组件B中用this.$bus.$on('事件名',callback) 监听(接收)A传过来的数据
4. 组件B中this.$bus.$off('事件名')移除事件监听(销毁全局事件总线)