博客
关于我
Vue使用bus进行组件间、父子路由间通信
阅读量:374 次
发布时间:2019-03-05

本文共 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);    }

转载地址:http://vtmg.baihongyu.com/

你可能感兴趣的文章
MySQL参数调优详解
查看>>
mysql参考触发条件_MySQL 5.0-触发器(参考)_mysql
查看>>
MySQL及navicat for mysql中文乱码
查看>>
MySqL双机热备份(二)--MysqL主-主复制实现
查看>>
MySQL各个版本区别及问题总结
查看>>
MySql各种查询
查看>>
mysql同主机下 复制一个数据库所有文件到另一个数据库
查看>>
mysql启动以后会自动关闭_驾照虽然是C1,一直是开自动挡的车,会不会以后就不会开手动了?...
查看>>
mysql启动和关闭外键约束的方法(FOREIGN_KEY_CHECKS)
查看>>
Mysql启动失败解决过程
查看>>
MySQL启动失败:Can't start server: Bind on TCP/IP port
查看>>
mysql启动报错
查看>>
mysql启动报错The server quit without updating PID file几种解决办法
查看>>
MySQL命令行登陆,远程登陆MySQL
查看>>
mysql命令:set sql_log_bin=on/off
查看>>
mySQL和Hive的区别
查看>>
MySQL和Java数据类型对应
查看>>
mysql和oorcale日期区间查询【含左右区间问题】
查看>>
MYSQL和ORACLE的一些操作区别
查看>>
mysql和redis之间互相备份
查看>>