本文共 764 字，大约阅读时间需要 2 分钟。

1.前言

在项目中遇到需要在父路由中调用子路由中的方法，这样的问题实际也是组件间的通信，在子路由中可以直接通过this.$parent.xxx来调用父页面中的方法，但反过来就有点头疼了，经过一番查阅后通过bus成功解决问题，这里仅记录如何解决应用问题，不追究bus更多的原理。

2.抽取封装bus

项目src下新建utils目录，新建bus.js：

import Vue from 'vue'const bus = new Vue()export default bus 

3.子路由中监听

首先引入bus.js：

import bus from "@/utils/bus";

页面渲染完成即开始监听需要在父页面中使用的方法：

methods:{           test(){             console.log('123');        },	},mounted() {           bus.$on('test',this.test);    }

4.父页面中触发方法

引入bus.js：

import bus from "@/utils/bus";

触发：

methods:{   		createGroup(){             bus.$emit('test')        },	}

这样在父页面中给一个按钮绑定createGroup点击事件后，点击按钮后便可以调用子路由中的test方法。

5.注意

由于子路由页面中是在mounted中监听的方法，可能出现多次监听的情况，进而引起监听的方法多次触发的问题。只需要在监听前先取消就行：

mounted() {   		bus.$off('test');        bus.$on('test',this.test);    }