uniapp中使用 uni.navigateBack() 返回上级页面并传参,vue3setup实现方法

在uniapp中使用`uni.navigateBack()`方法可以实现返回上一级页面的功能，并且可以在返回时携带参数。在Vue3的`setup`函数中实现这一功能，可以通过`getCurrentInstance`方法获取到全局的Vue实例，然后调用`$vm.$parent`来访问父组件实例，并调用其`$vm.$emit`方法来向父页面传递参数。

以下是具体的实现步骤：

1. 在`setup`函数中，首先需要导入`getCurrentInstance`函数。
2. 通过`getCurrentInstance()`获取到当前组件的实例信息。
3. 通过实例的`proxy`属性访问到当前组件的`$parent`，获取到父组件的实例。
4. 调用父组件实例的`$emit`方法，向父页面传递参数。

示例代码如下：

import { getCurrentInstance } from 'vue';

export default {
  setup(props, context) {
    const instance = getCurrentInstance();
    if (instance) {
      const { proxy } = instance;
      const parent = proxy.$parent;
      if (parent) {
        parent.$emit('updateParam', { key: 'value' });
      }
    }

    // 定义返回上级页面并传递参数的方法
    const navigateBackAndPassParam = () => {
      uni.navigateBack({
        delta: 1, // 返回的页面数，如果 delta 大于1，则会连续返回
        success: (res) => {
          console.log('返回成功', res);
        },
        fail: (err) => {
          console.error('返回失败', err);
        }
      });
    };

    return {
      navigateBackAndPassParam
    };
  }
};

在父页面中，需要监听`updateParam`事件来接收传递的参数：

// 父页面代码示例
export default {
  setup() {
    // 监听子页面发出的updateParam事件
    const updateParamHandler = (params) => {
      console.log('收到参数', params);
    };

    onMounted(() => {
      // 在onMounted钩子中绑定事件
      const instance = getCurrentInstance();
      if (instance) {
        const { proxy } = instance;
        proxy.$on('updateParam', updateParamHandler);
      }
    });

    onUnmounted(() => {
      // 组件销毁前解绑事件
      const instance = getCurrentInstance();
      if (instance) {
        const { proxy } = instance;
        proxy.$off('updateParam', updateParamHandler);
      }
    });

    return {};
  }
};