学习记录-页面间的通讯（小程序 or vue）

不同组件之间的通讯，大家都知道有很多种方法吧， 1.最常见的就是vuex了， 2.组件之间的传参方法也很多种，比如： props / $emit eventbus vuex $attrs / $listeners ref / $parent 组件之间的传参的详细使用方法我之前也有发过文章了，有需要的童鞋可以去看看。

最近跟大佬们学习，了解到了一个新的页面通讯的方法，想跟大家分享一下，也想做一下学习笔记，以备需要。 下面的这种方法其实跟uniapp封装的页面通讯API的用法类似，全局自定义事件，然后监听事件等。附上链接：爱学习的童鞋赶紧去看看吧

下面附带一下大佬的页面通讯代码如下： 1.自定义一个js文件：（代码是大佬分享给我的）

class Event {
          
   
//监听全局的自定义事件（注册事件），事件由 emit 触发，回调函数会接收事件触发函数的传入参数。
    on(event, fn, ctx) {
          
   
        if (typeof fn != "function") {
          
   
       		// 一定是一个函数哦
            console.error(fn must be a function)
            return
        }

        this._stores = this._stores || {
          
   };
        (this._stores[event] = this._stores[event] || []).push({
          
    cb: fn, ctx: ctx })
    }
//触发全局的自定义事件，附加参数都会传给监听器回调函数
    emit(event) {
          
   
        this._stores = this._stores || {
          
   }
        var store = this._stores[event],
            args

        if (store) {
          
   
            store = store.slice(0)
            args = [].slice.call(arguments, 1)
            for (var i = 0, len = store.length; i < len; i++) {
          
   
                store[i].cb.apply(store[i].ctx, args)
            }
        }
    }
//移除全局自定义事件监听器
    off(event, fn) {
          
   
        this._stores = this._stores || {
          
   }

        // all
        if (!arguments.length) {
          
   
            this._stores = {
          
   }
            return
        }

        // specific event
        var store = this._stores[event]
        if (!store) return

        // remove all handlers
        if (arguments.length === 1) {
          
   
            delete this._stores[event]
            return
        }

        // remove specific handler
        var cb
        for (var i = 0, len = store.length; i < len; i++) {
          
   
            cb = store[i].cb
            if (cb === fn) {
          
   
                store.splice(i, 1)
                break
            }
        }
        return
    }
}

export default Event

其实原理都差不多，把需要通讯处理的函数传进来，在全局中当作对象存储，然后调用（我的理解是这样，可能不是这样说法，但是用法类似，如有大佬经过，非常欢迎帮指正，因为我也不是很懂，哈哈哈哈）

2.用法： 在入口js文件中导入/注册 1)、比如原生小程序是在app.js文件中： 在页面中调用：

//a页面注册一个全局监听的自定义事件 : 
 App.ad.on(setToken,(value)=>{
          
   
	//value = {token:0}
	// 是一个回调函数，对传入的数据进行逻辑处理
 },this)

// b页面使用emit触发 : 
App.ad.emit(setToken,{
          
   token:0})

2)、在uniapp中的用法，是在main.js中导入（像vuex一样，把store.js文件导入)

import store from @/store.js;
import event from @/utils/event.js;
const app = new Vue({
          
   
	store,
	event,
    ...App
})

//在a页面中注册一个全局监听事件：

mounted(){
          
   
	this.$event.on(updata,(data)=>{
          
   
		//回调处理的函数,eg：
		this.reSetData(data)
	})
},
methods:{
          
   
	reSetData(data){
          
   
		let newData = data.data -1;
		console.log(data.msg) 
	},
},

在b页触发监听：

this.$event.emit(updata, {
          
   
		msg: 数据更新啦,
		data:6
	})