我们都了解Vue的组件通信可以分为三种:父子组件、兄弟组件、跨层级组件。
简单理解包含关系即为父子、并列关系即为兄弟,前二者之外的即为跨层级组件通信。
今天讲讲开发中常见的一种跨层级通信的情况,假如要有这样一个需求, 我要在当前页面执行某项操作,之后跳转到另一个页面并执行相应的方法,相当于在本页面调用其他页面的方法,此时就可以用到跨层级通信的方式来处理。
1:如何实现跨层级通信?
根据需求描述,很快就可想到,既然是不同页面方法的调用,可以建立一个中转站,让A页面发送请求到中转站,中转站再将请求通知B页面。
2:具体实现?
- 构建中转站:Vue中创建Vue实例
//首先新建util.js文件 import Vue from 'vue' export default new Vue
- 然后在两个页面中引入
//A页面 import Trsfer from '../utils.js' //调用方,派发方式 ... methods:{ //跨页面调用方法 functionA(){ this.$router.push('./B'); Trsfer.$emit('clickPriview','msg'); } } ...
至此即可完成Vue的跨层级组件通信,实现在当前页面调用其他页面的方法//B页面 import Trsfer from '../utils.js' ... //被调用方 mounted(){ var that = this; Trsfer.$on('clickPrview',function(s){ console.log(s); that.functionB(); }) }, methods:{ functionB(){ console.log('hello'); } } ...
👍🏻 nice