uniapp vue3 怎么传参给上一页

### 如何在 Vue3 中给 UniApp 组件传递参数 #### 使用 `props` 进行父子组件间通信 在 Vue3 和 UniApp 开发环境中，最常见的方式之一是利用 `props` 来实现父级到子级的数据传输。这种方式简单直观，并且能够很好地保持数据流动的方向性。 ```html <!-- ParentComponent.vue --> <template> <ChildComponent :message="parentMessage" /> </template> <script setup lang="ts"> import ChildComponent from './ChildComponent.vue'; const parentMessage = "Hello from Parent"; </script> ``` ```html <!-- ChildComponent.vue --> <template> <div>{{ message }}</div> </template> <script setup lang="ts"> defineProps<{ message: string; }>(); </script> ``` 此方法适用于简单的单向数据流场景，在这种情况下不需要复杂的逻辑处理即可完成任务[^4]。 #### 利用事件总线（Event Bus） 对于更复杂的应用程序结构或是当存在兄弟组件间的交流需求时，则可以考虑引入全局事件中心——即所谓的“事件总线”。这允许不同层次甚至无直接关联关系的组件之间互相发送消息或触发特定行为。 创建一个独立文件用于定义事件总线： ```javascript // eventBus.js import { createApp } from 'vue'; export const EventBus = createApp({}).config.globalProperties.eventBus || {}; ``` 然后就可以像下面这样来发布和订阅自定义事件了: ```typescript // 发布者 Publisher.vue this.EventBus.$emit('eventName', payload); ``` ```typescript // 订阅者 Subscriber.vue this.EventBus.$on('eventName', (data) => { console.log(data); // 处理接收到的信息 }); ``` 不过需要注意的是，随着项目规模的增长，过度依赖于此类机制可能会使代码变得难以理解和维护；因此建议谨慎评估其适用性和必要性后再做决定[^2]。 #### 页面跳转携带参数 针对页面级别的导航操作，可以通过 URL 参数的形式附带额外信息过去下一个目标页。具体来说就是在调用路由函数的时候指定 query 或 path parameters ，而在新打开的那个视图内部则可通过钩子函数如 `onLoad()` 获取这些值并作出相应反应。 ```typescript // 跳转前设置参数 uni.navigateTo({ url: '/pages/targetPage?paramKey=theValue' }); // targetPage.vue 内部读取参数 import { onLoad } from '@dcloudio/uni-app'; let paramValue; onLoad((options) => { paramValue = options.paramKey; }) ``` 上述例子展示了如何通过路径中的查询字符串形式传入变量，并由接收端解析使用[^3]。 #### 总结 综上所述，在 Vue3 结合 UniApp 的应用开发过程中，有多种途径可供选择来进行组件间乃至整个应用程序范围内的状态共享与互动控制。每种方案都有各自的特点及优劣之处，实际选用哪一种取决于具体的业务需求和技术考量因素。

### 如何在 UniApp 和 Vue3 中实现全局分享功能并传递参数 #### 创建全局分享的 JS 文件 为了实现在 UniApp 和 Vue3 中的全局分享功能，可以创建一个专门用于处理分享逻辑的 JavaScript 文件。以下是具体实现方式： ```javascript // ./utils/shareWx.js export default { shareConfig: { title: '默认分享标题', // 默认分享标题 path: '/pages/index/index?query=example', // 默认分享路径，带查询参数 imageUrl: '', // 分享图片链接 desc: '这是默认描述' // 默认描述 }, setShareData(data) { this.shareConfig = { ...this.shareConfig, ...data }; } }; ``` 此模块提供了 `shareConfig` 对象作为全局配置，并允许通过调用 `setShareData` 方法动态修改分享数据[^1]。 --- #### 配置全局分享方法 在 UniApp 的应用入口文件（通常是 `main.js` 或类似的初始化脚本）中引入上述模块，并设置全局分享行为： ```javascript import Share from './utils/shareWx'; const app = createSSRApp({ onLaunch() { uni.addInterceptor('shareAppMessage', (options) => { const res = options && options.res; return { title: Share.shareConfig.title, path: `${Share.shareConfig.path}${res ? `&${JSON.stringify(res).replace(/"/g, '')}` : ''}`, imageUrl: Share.shareConfig.imageUrl || '', summary: Share.shareConfig.desc }; }); } }); ``` 在此代码片段中，利用了 `uni.addInterceptor` 来拦截所有的分享事件，并返回自定义的分享内容。注意，在拼接路径时可以通过附加参数来支持更复杂的场景需求。 --- #### 页面级动态调整分享内容 如果某些页面需要特定的分享内容，则可以在对应页面生命周期函数中更新全局分享配置： ```javascript <template> <view>这是一个示例页面</view> </template> <script setup> import { onMounted } from 'vue'; import Share from '../../utils/shareWx'; onMounted(() => { Share.setShareData({ title: '来自某个特殊页面的分享', path: `/pages/specialPage/specialPage?id=${new Date().getTime()}` }); }); </script> ``` 在这个例子中，当进入某页面时会自动更新当前页面的分享内容，从而覆盖默认值。 --- #### 使用 Vue Router 进行路由跳转与参数解析 对于接收端来说，通常会在目标页面加载时读取 URL 参数以便展示相关内容。假设我们有一个详情页组件如下所示： ```javascript <template> <view>{{ queryParam }}</view> </template> <script setup> import { ref, onShow } from 'vue'; import { onLoad } from '@dcloudio/uni-app'; const queryParam = ref(''); onLoad((options) => { console.log(options); // 输出形如 {"id":"timestamp"} queryParam.value = JSON.stringify(options); }); </script> ``` 这里展示了如何捕获由分享带来的查询字符串参数，并将其显示出来[^2]。 --- #### 结合最新语法优化体验 由于采用了 Vue 3 技术栈，因此还可以充分利用 Composition API 提供的新特性简化业务逻辑编写过程。例如上面提到的 `onMounted`, `ref` 等均属于此类范畴[^3]。 ---