uniapp vue3中使用getOpenerEventChannel

setup中使用

<script setup>
import { getCurrentInstance, onMounted } from 'vue';
onMounted(() => {
  const instance = getCurrentInstance().proxy;
  if (instance && instance.getOpenerEventChannel) {
    const eventChannel = instance.getOpenerEventChannel();
    eventChannel.on('acceptDataFromOpenerPage', function ({ data }) {
      console.log(data);
    });
  }
});

</script>

setup typescript中使用

<script setup lang="ts">
import type { ComponentPublicInstance } from '@vue/runtime-core';
namespace OpenerEventSystem {
  export interface EventChannel {
    on<T = any>(event: string, callback: (data: T) => void): void;
    emit<T = any>(event: string, data: T): void;
  }
}
// 向ComponentPublicInstance中添加CustomOpenerEventChannel
interface CustomOpenerEventChannel extends ComponentPublicInstance {
  getOpenerEventChannel(): OpenerEventSystem.EventChannel;
}
/**
 * 返回一个openerEventChannel, 使用wx.navigateTo向目标页面传递数据, 在onMounted中执行
 * @returns OpenerEventSystem.EventChannel | null
 */
function useOpenerEventChannel(): OpenerEventSystem.EventChannel | null {
  const currentInstance = getCurrentInstance();
  if (currentInstance) {
    const proxy = currentInstance.proxy as CustomOpenerEventChannel;
    if (proxy.getOpenerEventChannel) {
      return proxy.getOpenerEventChannel();
    }
  }
  return null;
}

// 使用
import { onMounted } from 'vue';
onMounted(() => {
  const eventChannel = useOpenerEventChannel();
  if (eventChannel) {
    eventChannel.on<TeacherClassResponse>('acceptDataFromOpenerPage', (data) => {
      console.log('Received data:', data);// 传入时注意使用解构 
      // res.eventChannel.emit('acceptDataFromOpenerPage', { ...data });
    });
  }
});

</script>