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

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

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

好啦，封装以及用法大致代码我都贴完了，这部分的笔记也做得差不多了，如果有新的发现，我会继续分享给大家的，一起学习一起讨论，一起进步和提升。。。。

标签：vue,stores,js,通讯,._,event,store,页面
来源： https://blog.csdn.net/MMFerry/article/details/112956013