uniapp组价传参vue3

### 如何在 Vue3 中给 UniApp 组件传递参数

#### 使用 `props` 进行父子组件间通信
在 Vue3 和 UniApp 开发环境中，最常见的方式之一是利用 `props` 来实现父级到子级的数据传输。这种方式简单直观，并且能够很好地保持数据流动的方向性。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
const parentMessage = "Hello from Parent";
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
defineProps<{
  message: string;
}>();
</script>

此方法适用于简单的单向数据流场景，在这种情况下不需要复杂的逻辑处理即可完成任务[^4]。

#### 利用事件总线（Event Bus）
对于更复杂的应用程序结构或是当存在兄弟组件间的交流需求时，则可以考虑引入全局事件中心——即所谓的“事件总线”。这允许不同层次甚至无直接关联关系的组件之间互相发送消息或触发特定行为。

创建一个独立文件用于定义事件总线：

// eventBus.js
import { createApp } from 'vue';
export const EventBus = createApp({}).config.globalProperties.eventBus || {};

然后就可以像下面这样来发布和订阅自定义事件了:

// 发布者 Publisher.vue
this.EventBus.$emit('eventName', payload);

// 订阅者 Subscriber.vue
this.EventBus.$on('eventName', (data) => {
    console.log(data); // 处理接收到的信息
});

不过需要注意的是，随着项目规模的增长，过度依赖于此类机制可能会使代码变得难以理解和维护；因此建议谨慎评估其适用性和必要性后再做决定[^2]。

#### 页面跳转携带参数
针对页面级别的导航操作，可以通过 URL 参数的形式附带额外信息过去下一个目标页。具体来说就是在调用路由函数的时候指定 query 或 path parameters ，而在新打开的那个视图内部则可通过钩子函数如 `onLoad()` 获取这些值并作出相应反应。

// 跳转前设置参数
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 的应用开发过程中，有多种途径可供选择来进行组件间乃至整个应用程序范围内的状态共享与互动控制。每种方案都有各自的特点及优劣之处，实际选用哪一种取决于具体的业务需求和技术考量因素。