uni组件和页面之间的通信（所有页面共用工具栏）

男娘i 2021-11-10 19:24 463阅读 0赞

uni官方文档中写有页面通信方式：  
[https://uniapp.dcloud.io/api/window/communication?id=emit][https_uniapp.dcloud.io_api_window_communication_id_emit]

uni.$emit(eventName,OBJECT)  
触发全局的自定事件。附加参数都会传给监听器回调。  
示例：

uni.$emit('update',{msg:'页面更新'})

uni. o n ( e v e n t N a m e , c a l l b a c k ) 监 听 全 局 的 自 定 义 事 件 。 事 件 可 以 由 u n i . on(eventName,callback) 监听全局的自定义事件。事件可以由 uni. on(eventName,callback)监听全局的自定义事件。事件可以由uni.emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

uni.$on('update',function(data){
            console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
        })

uni. o n c e ( e v e n t N a m e , c a l l b a c k ) 监 听 全 局 的 自 定 义 事 件 。 事 件 可 以 由 u n i . once(eventName,callback) 监听全局的自定义事件。事件可以由 uni. once(eventName,callback)监听全局的自定义事件。事件可以由uni.emit 触发，但是只触发一次，在第一次触发之后移除监听器。

uni.$once('update',function(data){
            console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
        })

uni.$off(\[eventName, callback\])  
移除全局自定义事件监听器。  
Tips

如果没有提供参数，则移除所有的事件监听器；  
如果只提供了事件，则移除该事件所有的监听器；  
如果同时提供了事件与回调，则只移除这个回调的监听器；

uni.$off('update',function(data){
        console.log('移除 update 自定义事件');
     })

上面是官方介绍。现在我说一下我的使用场景，由于uni不支持Layer。不支持layer，那么我们就没办法写公用的页面。  
打个比方，现在有个商城，商城中每个页面都需要加一个浮动按钮（工具栏）。要求：每次进入新的页面时，工具栏中所有的工具都显示出来，而如果隐藏了工具栏，其余页面的工具栏也不展示（只显示一个小按钮，用于调出工具栏）。  
如何实现？  
先在main.js中引入公共组件（购物车）：

import popupLayerTools from '@/components/popup-layer-tools/popup-layer-tools.vue';
    Vue.component('popup-layer-tools',popupLayerTools)

这样，我们就不用在每个页面都引用了。  
接着，我们在组件中调用：

uni.$emit('doneHome', {
    	done: true
    })
    uni.$emit('doneUser', {
    	done: true
    })

触发事件。  
如果现在有多个页面都需要引用，我们就需要多些几个：

uni.$emit('done3', {
    	done: true
    })
    uni.$emit('done4', {
    	done: true
    })

接着在引用组件的页面：

<popup-layer-tools ref="toolsRef"></popup-layer-tools>
    	
    	onShow(){
    		console.info("home show")
    		this.handleDone()
    	},
    	onReady() {
    		console.info("home onReady")
    		uni.$once('doneHome',(doneStatus)=>{  
    			console.info("done home 启动")
    			this.handleDone();
    		})
    	},

另外的页面是一样的。  
需要注意的是，最好使用uni自带的onShow,onReady，  
VUE也有自己的实名周期函数，最好不用，否则在微信小程序中不支持。

[https_uniapp.dcloud.io_api_window_communication_id_emit]: https://uniapp.dcloud.io/api/window/communication?id=emit