无法使用 Ionic 5 监听发出的事件 [英] Unable to listen to emitted events with Ionic 5

问题描述

我创建了一个简单的 ionic 应用，允许用户预订服务.用户将选择一个服务类别，选择一项服务，然后导航到一个表单以完成预订.

我已经使用 tiny Emitter 设置了一个事件总线，因为该项目使用 vue 3 和组合 API.数据按预期发出，但是当导航到预订表单时，不会触发侦听器.

预期行为是获取所选服务并将其与其余预订信息一起发送到 REST api.

eventBus.js

import { TinyEmitter } from 'tiny-emitter';const 发射器 = 新 TinyEmitter();const eventBus = () =>{返回{发射器}；};导出默认事件总线；

Service.vue

//模板<ion-button routerDirection="forward";routerLink="/booking";@click=sendEvent">立即预订</ion-button>//脚本从 './eventBus' 导入 eventBus；导出默认{...设置() {...const sendEvent = () =>{eventBus().emitter.emit('selected-service', 100)//真正的代码发出一个数组}返回 { 发送事件 }}}

Booking.vue - 控制台日志中没有任何反应

我知道这适用于常规的 Vue 3 项目，但我不确定为什么它不适用于 ionic.

我尝试过的东西

• 通过context 使用本机发射器作为设置参数.

  解决方案

  这可能是框架级别的错误.我已经通过 twitter 与 Ionic 团队进行了交谈，并被建议改用查询参数，这就是我采取的路线.

  I created a simple ionic app that allows users to book services. The user would select a service category, choose a service(s) then navigate to a form to complete the booking.

  I've setup an event bus using tiny emitter since the project uses vue 3 with the composition api. The data emits as expected however when navigating to the booking form the listener is not triggered.

  The expected behaviour is to get the selected service(s) and send it along with the rest of the booking info to a REST api.

  eventBus.js

  import { TinyEmitter } from 'tiny-emitter';
  const emitter = new TinyEmitter();
  const eventBus = () => {
      return { emitter };
  };
  export default eventBus;
  

  Service.vue

  // template
  
  <ion-button routerDirection="forward" routerLink="/booking" @click="sendEvent">Book Now</ion-button>
  
  // script
  
  import eventBus from './eventBus';
  
  export default {
    ...
    setup() {
      ...
      const sendEvent = () => {
        eventBus().emitter.emit('selected-service', 100) // the real code emits an array
      }
      return { sendEvent }
    }
  
  }
  

  Booking.vue - Nothing happens in the console log

  <script>
  ...
  onMounted(() => {
    eventBus().emitter.on('selected-service', (payload) => {
      console.log('listener', payload);
    })
  })
  </script>
  

  I know this works in a regular Vue 3 project but I'm not sure why it's not working with ionic.

  Things I've tried

  • Using the native emitter via context as a setup param. https://v3.vuejs.org/guide/composition-api-setup.html#accessing-component-properties
  • Using the mitt package as described here: Vue 3 Event Bus with Composition API
  • Emitting the event when the user chooses a service rather than when they click "Book Now"
  • Calling the listener in setup() directly rather than onMounted.

  UPDATE

  I noticed the listener gets called when I navigate off the booking page then back to it. So if I go from service details -> booking -> back to service details -> booking it triggers the bus and the payload is captured.

  解决方案

  This may be a framework level bug. I've spoken to the Ionic team via twitter and was advised to use query params instead so that's the route I took.

  这篇关于无法使用 Ionic 5 监听发出的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！