学习记录-页面间的通讯(小程序 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文件中:
学习记录-页面间的通讯(小程序 or vue)
在页面中调用:

 //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
	})

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

上一篇:GeoWave实践1:简介与安装部署(Linux)


下一篇:zookeeper