vue 两个没有关联的组件怎么通过一个组件的方法去调用另外一个组件的方法
时间: 2023-11-03 10:14:28 浏览: 35
如果两个没有关联的组件想要通过一个组件的方法去调用另外一个组件的方法,可以使用事件总线(Event Bus)来实现。
具体步骤如下:
1. 创建一个事件总线,可以使用 Vue 实例作为事件总线:
```javascript
// 创建一个事件总线
export const EventBus = new Vue();
```
2. 在需要调用的组件中,通过事件总线传递事件及参数:
```javascript
// 通过事件总线传递事件及参数
import { EventBus } from '@/utils/eventBus.js';
// ...
methods: {
callAnotherComponentMethod(params) {
EventBus.$emit('event-name', params);
}
},
// ...
```
3. 在需要被调用的组件中,监听事件总线中的事件:
```javascript
// 在需要被调用的组件中,监听事件总线中的事件
import { EventBus } from '@/utils/eventBus.js';
// ...
mounted() {
EventBus.$on('event-name', this.anotherComponentMethod)
},
// ...
methods: {
anotherComponentMethod(params) {
// 处理事件
}
}
```
这样,当需要调用另一个组件中的方法时,只需要通过事件总线传递事件及参数,被调用的组件就可以接收到事件并执行相应的方法。