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);
    }
本文来源MrKorbin,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/25301

发表评论