博客
关于我
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分表后同结构不同名称表之间复制数据以及Update语句只更新日期加减不更改时间
查看>>
mySql分页Iimit优化
查看>>
MySQL分页查询
查看>>
mysql列转行函数是什么
查看>>
mysql创建函数报错_mysql在创建存储函数时报错
查看>>
mysql创建数据库和用户 并授权
查看>>
mysql创建数据库指定字符集
查看>>
MySql创建数据表
查看>>
MySQL创建新用户以及ERROR 1396 (HY000)问题解决
查看>>
MySQL创建用户与授权
查看>>
MySQL创建用户报错:ERROR 1396 (HY000): Operation CREATE USER failed for 'slave'@'%'
查看>>
MySQL创建索引时提示“Specified key was too long; max key length is 767 bytes”
查看>>
mysql初始密码错误问题
查看>>
MySQL删除数据几种情况以及是否释放磁盘空间【转】
查看>>
Mysql删除重复数据通用SQL
查看>>
mysql判断某一张表是否存在的sql语句以及方法
查看>>
mysql加入安装策略_一键安装mysql5.7及密码策略修改方法
查看>>
mysql加强(1)~用户权限介绍、分别使用客户端工具和命令来创建用户和分配权限
查看>>
mysql加强(3)~分组(统计)查询
查看>>
mysql加强(4)~多表查询:笛卡尔积、消除笛卡尔积操作(等值、非等值连接),内连接(隐式连接、显示连接)、外连接、自连接
查看>>