Vue2 实现一个页面 调用 另一个页面的函数

今天我在Vue 需要实现 一个这样的功能

在App.vue页面中 要实现 调用 另一个页（ExtensionMonitor.vue）中的函数 并将参数 传过去

下面将实现的步骤写下来，供大家参考

1.首先 建立一个 util.js 中转站文件（任意位置,我是在/api/util.js）

 填写两行代码

import Vue from 'vue'
export default new Vue

2.分别在两个页面引入该文件（注意路径）

import Utils from '@/api/util.js';

App.vue

 ExtensionMonitor.vue

 3.调用方代码  App.vue

 RecTcpMessage(strMsg) {
        Utils.$emit('On_AppVue_RecTcpMessage',strMsg);
 },

 

 注：调用时 需要写 this.

4.被调用方代码    ExtensionMonitor.vue

mounted(){
    var that = this;
    Utils.$on('On_AppVue_RecTcpMessage', function (strMsg) {
        //console.log(strMsg);
        that.AppVue_RecTcpMessage(strMsg);
    })
},
methods: {
    //App.vue中收到Websocket消息
    AppVue_RecTcpMessage(strMsg) {
      console.log("监控页 收到Websocket消息 "+strMsg);
    },
}

 这样就可以实现  在 App.vue 页面上 调用 ExtensionMonitor.vue页的 AppVue_RecTcpMessage() 函数了

 

十分感谢：

https://www.shuzhiduo.com/A/QV5ZGDB6dy/