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);
}