问题:
在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();
    })
  },

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

Logo

前往低代码交流专区

更多推荐