Vue.js如何在一个页面调用另一个同级页面的方法
时间: 2024-03-15 13:45:55 浏览: 67
在父页面调用子页面的JS方法
在Vue.js中,同级组件之间可以通过事件总线进行通信。可以在同级组件的共同父级组件中创建一个事件总线,然后在需要调用方法的组件中触发对应的事件,从而实现调用另一个同级组件的方法。
具体实现步骤如下:
1.在同级组件的共同父级组件中创建一个事件总线:
```js
// 在父组件中创建事件总线
var eventBus = new Vue();
```
2.在需要调用方法的组件中触发对应的事件:
```js
// 在组件中触发事件
eventBus.$emit('event-name', params);
```
3.在需要被调用的组件中监听对应的事件,调用相应的方法:
```js
// 在组件中监听事件
eventBus.$on('event-name', function (params) {
// 调用组件方法
this.methodName(params);
});
```
需要注意的是,在监听事件时,this指向的是事件总线对象,因此需要通过bind方法将this指向组件实例。
例如:
```js
eventBus.$on('event-name', function (params) {
// 调用组件方法
this.methodName(params);
}.bind(this));
```
这样就可以在一个页面调用另一个同级页面的方法了。
阅读全文