你可以在任何页面或组件中使用 `uni.$on` 方法来监听自定义事件。以下是一个简单的示例：
- javascript
- // pages/index/index.vue
- export default {
- onLoad() {
- // 监听名为 'customEvent' 的事件
- uni.$on('customEvent', (data) => {
- console.log('接收到 customEvent:', data);
- });
- },
- onUnload() {
- // 在页面卸载时移除事件监听器，避免内存泄漏
- uni.$off('customEvent');
- }
- }
2. 使用 `uni.$emit` 触发事件
你可以在其他页面或组件中使用 `uni.$emit` 方法来触发这个自定义事件：
- javascript
- // pages/other/other.vue
- export default {
- methods: {
- triggerEvent() {
- // 触发名为 'customEvent'的事件，并传递数据
- uni.$emit('customEvent', { message: 'Hello, UniApp!' });
- }
- }
- }
3. `$off`：移除事件监听器
为了避免内存泄漏和重复监听的问题，建议在不需要的时候移除事件监听器。你可以使用 `uni.$off`：
- 移除特定事件的监听器：
如果你只想移除某个特定事件的监听器，可以传递事件的名称：
- javascript
- uni.$off('customEvent');
- 移除所有事件的监听器：
如果你想一次性移除所有事件的监听器，可以不传递任何参数：
- javascript
- uni.$off();
4. `$once`:一次性的事件监听
如果你只想在某次特定的事件被触发时执行一次回调函数，可以使用 `$once`:
- javascript
- // pages/index/index.vue
- export default {
- onLoad() {
- //只会在第一次接收到 customOnce Event时执行回调函数
- un i $ once (' customOnce Event ', (data )=>{ console . log ('接收到 customOnce Event :', data ); }); }, };
然后在其他地方通过 emit来触发了该 one-time event:
- javascript
- // pages / other / other . vue
- export default { methods :{ trigger Once Event (){ un i $ emit (' customOnce Event ',{ message :' This will only be logged once !'}); }}};
这样当 "trigger Once"被调用后,"This will only be logged once!"只会打印出来一次.
总结来说,通过结合 uniapp提供的全局 api如:$ on,$ emit,$ off和$ once,我们可以很方便地实现跨页面的通信与状态管理
文章点评