Vue跨层级组件通信

我们都了解Vue的组件通信可以分为三种：父子组件、兄弟组件、跨层级组件。

简单理解包含关系即为父子、并列关系即为兄弟，前二者之外的即为跨层级组件通信。

今天讲讲开发中常见的一种跨层级通信的情况，假如要有这样一个需求， 我要在当前页面执行某项操作，之后跳转到另一个页面并执行相应的方法，相当于在本页面调用其他页面的方法，此时就可以用到跨层级通信的方式来处理。

1：如何实现跨层级通信？

根据需求描述，很快就可想到，既然是不同页面方法的调用，可以建立一个中转站，让A页面发送请求到中转站，中转站再将请求通知B页面。

2：具体实现？

1. 构建中转站：Vue中创建Vue实例

   //首先新建util.js文件
   import Vue from 'vue'
   export default new Vue

2. 然后在两个页面中引入

   //A页面
   import Trsfer from '../utils.js'
   
   //调用方，派发方式
   ...
   methods:{
   //跨页面调用方法
       functionA(){
           this.$router.push('./B');
           Trsfer.$emit('clickPriview','msg');
       }
   }
   ...

   //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');
       }
   }
   
   ...

    至此即可完成Vue的跨层级组件通信，实现在当前页面调用其他页面的方法 

 👍🏻 nice