uniapp中主页面打开选择器子页面，子页面返回选中数据

@Dream_Chaser

已于 2025-07-09 10:19:55 修改

阅读量812

点赞数 19

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： uni-app javascript 前端

于 2025-07-01 14:56:58 首次发布

本文链接：https://blog.csdn.net/sqaaaaaaa/article/details/149046847

uniapp 专栏收录该内容

2 篇文章

订阅专栏

// 发送页面
uni.navigateTo({
  url: '/pages/target',
  events: {
    acceptData: (data) => { console.log(data) } // 定义监听事件
  }
});

// 接收页面
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('acceptData', {key: 'value'}); // 触发事件

一、主要功能

‌跨页面事件监听‌
在uni.navigateTo跳转时注册事件监听器，目标页面可通过getOpenerEventChannel()触发这些事件.
‌替代URL参数传递复杂数据‌
当需要传递对象、数组等非字符串数据时，events比URL拼接更高效且无长度限制
‌实现页面间回调机制‌
允许子页面操作完成后主动通知父页面，例如表单提交后刷新列表

二、典型应用场景

‌表单选择器场景‌
主页面打开选择器子页面，子页面返回选中数据：

// 主页面
uni.navigateTo({
  url: '/pages/order-selector',
  events: {
    orderSelected: (order) => { this.selectedOrder = order }
  }
});

// 选择器页面
onSelect(order) {
  getOpenerEventChannel().emit('orderSelected', order);
  uni.navigateBack();
}

完整实例: 主页面:


<template>
  <view class="container">
    <uni-forms ref="form" :model="formData">
      <uni-forms-item label="订单编号" name="order">
        <input 
          v-model="formData.order.name" 
          placeholder="请选择订单" 
          disabled
          @click="selectOrder"
        />
        <text v-if="formData.order.id" class="order-info">
          ({{formData.order.amount}}元 {{formData.order.date}})
        </text>
      </uni-forms-item>
      <!-- 其他表单字段 -->
      <button @click="submit">提交表单</button>
    </uni-forms>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        order: { id: '', name: '', amount: '', date: '' },
        // 其他表单字段...
      }
    }
  },
  methods: {
    selectOrder() {
      uni.navigateTo({
        url: '/pages/order/select',
        events: {
          acceptOrderData: this.handleOrderSelect
        }
      });
    },
    handleOrderSelect(data) {
      this.formData.order = data;
    },
    submit() {
      console.log('提交数据:', this.formData);
    }
  }
}
</script>

<style>
.order-info {
  color: #888;
  margin-left: 10px;
}
</style>

子页面

<template>
  <view>
    <uni-list>
      <uni-list-item 
        v-for="item in orderList" 
        :key="item.id"
        :title="item.name"
        :note="`${item.amount}元 | ${item.date}`"
        clickable
        @click="selectItem(item)"
      />
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderList: [
        { id: '1001', name: '订单A', amount: '199', date: '2025-06-01' },
        { id: '1002', name: '订单B', amount: '299', date: '2025-06-15' }
      ]
    }
  },
  methods: {
    selectItem(item) {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit('acceptOrderData', item);
      uni.navigateBack();
    }
  }
}
</script>