vue3 uniapp项目中eventChannel的解决方案

（2）在页面跳转成功后才监听事件，且使用$once，省去手动维护事件周期（监听、卸载），亦可减少事件之间相互影响的概率。携带为主，我需要到某个目标页面，并带一些数据给它，我发起跳转目标页面，成功后发送数据，目标页面监听事件并获取数据。订阅为主，我需要某个目标页面给我一些数据，我发起监听后跳转目标页面，目标页面处理数据后发回数据，并回到订阅页面。（2）使在vue项目中由于this的问题，该方案不是那

从不甘到不凡

3415人浏览 · 2023-04-24 11:19:51

从不甘到不凡 · 2023-04-24 11:19:51 发布

描述：

（1）在vue2中的uniapp项目跨页面数据传递的方式有很多, 其中最优解还是eventChannel莫属

（2）使在vue3项目中由于this的问题，该方案不是那么好，当然也有对应方案，可自行百度，

个人觉得使用$once,$emit事件总线比较舒服！

（3）本人在此处说明2种经典场景，希望给到一些启发，大家可自行改良已达需求！

场景一：A ==携带数据==> B

携带为主，我需要到某个目标页面，并带一些数据给它，我发起跳转目标页面，成功后发送数据，目标页面监听事件并获取数据

A页面（产生数据，传递数据）

/**
 * 跳转品牌
 */
function handleSend() {
  const eventID = uuid() // 事件标识
  const data = {} // 携带数据
  uni.navigateTo({
    url: '/pages/sub/brand/list',
    success: () => {
      // 页面跳转成功后，我监听一个通知，等待目标页通知我：它准备好接收了，此时我才发送数据
      // 解决目标也尚未开始监听，就发送了数据而导致无法成功接收数据的问题
      uni.$once('get:' + eventID, () => {
        uni.$emit('post:' + eventID, data);
      });
    }
  });
}

B页面（需要数据，接收数据）

/**
 * 页面参数
 */
interface PropsType {
  _eventID?: string;
}
const props = defineProps<PropsType>();

/**
 * 监听元数据
 */
function handleMeta() {
  // 目标也首先准备好接收数据（监听事件）
  uni.$once('post:' + props._eventID, (data) => {
    console.log('data :>> ', data);
  });
  // 通知上一页，我已准备好，让它发送数据
  uni.$emit('get:' + props._eventID);
}
handleMeta();

场景二：A ==> B ==携带数据==> A

订阅为主，我需要某个目标页面给我一些数据，我发起监听后跳转目标页面，目标页面处理数据后发回数据，并回到订阅页面

A页面（需要数据，接收数据）

/**
 * 选择品牌
 */
function handleSelectBrand() {
  const eventID = uuid() // 事件标识
  uni.navigateTo({
    url: '/pages/sub/brand/list?_eventID=' + eventID,
    success: () => {
      uni.$once(eventID, (data) => {
        console.log('data:>> ', data);
      });
    }
  });
}

B页面（产生数据，传递数据）

/**
 * 页面参数
 */
interface PropsType {
  _eventID?: string;
}
const props = defineProps<PropsType>();

/**
 * 处理数据行
 *
 * @param data 数据对象
 */
function handleItem(data) {
    uni.$emit(props._eventID, data);
    uni.navigateBack();
}

重点：

（1）使用uuid标记事件，解决事件重复污染的问题

（2）在页面跳转成功后才监听事件，且使用$once，省去手动维护事件周期（监听、卸载），亦可减少事件之间相互影响的概率

（3）使用订阅通知的模式处理执行顺序的问题（事件在监听之前就已触发）