1.前言
在vue中两个组件无关系(非父子,兄弟即非直接关系),要实现一个组件对另一个组件方法调用以及数据通信。vue本身没有直接提供非关系组件间通信的内置机制 。
使用全局事件总线可以用于不同组件间监听与触发事件。注意事件监听器的清理避免内存泄露。
2.实践
2.1创建event-bus.js
首先,创建一个单独的 Vue 实例文件(比如 event-bus.js
),这个文件将作为事件总线:
javascript
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
在需要触发和监听的事件对应的组件中引入,根据需求进行调整修改。
2.2 组件A触发事件
使用 $emit
来触发事件。
javascript
<!-- ComponentA.vue -->
<template>
<button @click="triggerEvent">Trigger Event in Component B</button>
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
methods: {
triggerEvent() {
// 使用事件总线触发事件
EventBus.$emit('custom-event', { message: 'Hello from Component A' });
}
}
}
</script>
2.3组件B监听事件
使用 $on
来监听事件。
javascript
<!-- ComponentB.vue -->
<template>
<div>
<p>Message from Component A: {{ message }}</p>
</div>
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
data() {
return {
message: ''
};
},
created() {
// 组件创建时监听事件
EventBus.$on('custom-event', (data) => {
this.message = data.message;
});
},
beforeDestroy() {
// 组件销毁前移除监听器,防止内存泄漏
EventBus.$off('custom-event');
}
}
</script>
3.总结
ComponentA
使用 EventBus.$emit
来触发一个名为 custom-event
的事件,并传递了一个包含消息的对象作为参数。ComponentB
则在 created
钩子中使用 EventBus.$on
来监听这个事件,并在事件触发时更新其 message
数据属性。