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

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

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

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

vue 调用ios的浏览器 vue调用其他页面方法_App

 填写两行代码

import Vue from 'vue'
export default new Vue

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

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

App.vue

vue 调用ios的浏览器 vue调用其他页面方法_vue 调用ios的浏览器_02

 ExtensionMonitor.vue

vue 调用ios的浏览器 vue调用其他页面方法_vue 调用ios的浏览器_03

 3.调用方代码  App.vue

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

 

vue 调用ios的浏览器 vue调用其他页面方法_Vue_04

 注:调用时 需要写 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);
    },
}

vue 调用ios的浏览器 vue调用其他页面方法_App_05

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