vue非父子组件方法调用
时间: 2023-08-27 21:05:17 浏览: 59
在 Vue 中,非父子组件之间的通信可以通过事件总线(EventBus)来实现。事件总线是一个空的 Vue 实例,可以用它来触发和监听事件。
首先,在一个单独的文件中创建一个事件总线:
```javascript
import Vue from 'vue';
export const EventBus = new Vue();
```
然后,在需要触发事件的组件中,可以使用 `EventBus.$emit` 方法来触发事件:
```javascript
import { EventBus } from './event-bus';
export default {
methods: {
handleClick() {
EventBus.$emit('my-event', 'Hello from Component A!');
}
}
}
```
最后,在需要监听事件的组件中,使用 `EventBus.$on` 方法来监听事件:
```javascript
import { EventBus } from './event-bus';
export default {
created() {
EventBus.$on('my-event', message => {
console.log(message); // 'Hello from Component A!'
});
},
destroyed() {
EventBus.$off('my-event');
}
}
```
需要注意的是,在组件销毁时,需要使用 `EventBus.$off` 方法来取消事件监听,以防止内存泄漏。