vue3 页面接受参数

在Vue 3中，你可以通过以下几种方式向组件传递参数：

1. **Props（属性）**：
当子组件需要从父组件接收数据时，可以使用props。父组件通过`<component :propName="value">`的形式将值传给子组件，其中`:propName`是 prop 的名称，`value`是你要传递的数据。例如：

   <MyComponent message="Hello Vue!" />

然后在子组件中，通过`this.$props.propName`访问这个值。

2. **Query Parameters（查询参数）**：
对于URL参数，如果你使用的是Vue Router，可以在组件的路径中包含参数，如`/items/:id`，然后在组件内使用`this.$route.params.id`获取。

3. **Route Props（路由prop）**：
如果你在router-view上设置了`meta`对象，可以在组件的生命周期钩子`beforeCreate`或`created`中读取`$route.meta`里的参数。

4. **Vuex State（状态管理）**：
如果使用Vuex作为状态管理库，可以从store中获取共享的状态数据，通过`mapState`或直接访问`this.state`。

5. **自定义事件（Event Emitter）**：
可以在组件间通过`v-on`监听自定义事件，并传递参数。

6. **Component Injection（注入）**：
在Vue 3 Composition API中，可以使用`inject`从外部提供服务，并传递参数。

7. **Composition API的Provide/Inject**：
通过`provide`和`inject`可以实现父子组件间的通信，提供者传递数据给使用者。

每种方式的选择取决于你的应用场景和个人偏好。在实际项目中，可能会结合多种方式进行参数传递。