Vue使用bus进行组件间、父子路由间通信

Vue使用bus进行组件间、父子路由间通信

强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码

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