vue同级页面相互调用，解决被调用页面刷新页面监听器未关，方法调用多次。

vue同级页面相互调用，解决被调用页面刷新页面监听器未关，方法调用多次。

同级页面相互调用方法

官方给出方法：
需要在展示页里调用顶部导航栏页里的方法，两者之间没有引用关系，看了一下vue的API发现可以用这个方法实现。

https://cn.vuejs.org/v2/api/#vm-on

自己总结：
1.创建一个util.js 引入

import Vue from 'vue'
export default new Vue

2.调用方和被调用方引入util.js
3.调用方代码

print(){
   Utils.$emit('printUserDetail');
},

4.被调用方代码要将监听写道mouted里

mounted() {
  let that = this;
  Utils.$on('printUserDetail', function () {
    that.printUserDetail();
  })
},

此问题解决,后续问题，当页面刷新会多创建监听，导致方法被调用两次。
5.解决办法

mounted() {
  let that = this;
  Utils.$off('printUserDetail');
  Utils.$on('printUserDetail', function () {
    that.printUserDetail();
  })
},

通过vm.$off( [event, callback] ) 移除自定义事件监听器。
6.附加记录下$emit、 $on 、$off

1. vm.$on( event, callback )
   监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
2. vm.$emit( event, […args] )
   触发当前实例上的事件。附加参数都会传给监听器回调，如果没有参数，形式为vm.$emit(event)
3. vm.$off( [event, callback] )
   移除自定义事件监听器。