vue中同级页面调用另一个页面的方法

问题：
在vue前端项目开发时，需要从一个页面中调用另一个页面(同级组件)中的方法，这两个页面没有直接的关系，就像是在layout中的头部和内容区域的组件，需要在内容区域操作数据后调用头部组件中的方法。
解决：
在vue中官方已经给提供解决方法了：

下面是我具体的实现
首先创建一个工具随便命名，我的是 siblingCall.js

import Vue from "vue"
export default new Vue;

在两个同级页面都引入定义的工具
首先在需要调别的组件中的方法的页面

// 首先引入 @/utils/siblingCall是我的路径，根据自己的文件所在目录填写路径
import siblingCall from "@/utils/siblingCall";
// 在methods中写一个方法，此方法就可以调用另一个页面中的方法
methods: {
siblingMessage(){
      // TriggerGetMsgNum是事件名字，TriggerGetMsgPara是参数()
      //  也可以没有参数,直接写成siblingCall.$emit("TriggerGetMsgNum");
      siblingCall.$emit("TriggerGetMsgNum","TriggerGetMsgPara");
    },
}

被调用方法的页面

首先引入
import siblingCall from "@/utils/siblingCall";
// 在钩子函数中
mounted() {
    // TriggerGetMsgNum与上面的定义一致，TriggerGetMsgPara函数的参数
    // 如果是无参的siblingCall.$on("TriggerGetMsgNum",() => {  
    siblingCall.$on("TriggerGetMsgNum",(TriggerGetMsgPara) => {
      this.GetMessageNum();
    })
  },

这样就完成了同级(姐妹)组件的方法调用