不同组件之间的通讯,大家都知道有很多种方法吧,
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
})
好啦,封装以及用法大致代码我都贴完了,这部分的笔记也做得差不多了,如果有新的发现,我会继续分享给大家的,一起学习一起讨论,一起进步和提升。。。。