今天我在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() 函数了