vue实现传参

Vue 传参方法

路由传参（通过 URL）

在 Vue Router 中，可以通过动态路由或查询参数传递参数。

动态路由：

// 路由配置
{
  path: '/user/:id',
  component: User
}

// 组件中获取
this.$route.params.id

查询参数：

// 跳转时传递
this.$router.push({ path: '/user', query: { id: 123 } })

// 组件中获取
this.$route.query.id

Props 传参

父组件通过 props 向子组件传递数据。

父组件：

<child-component :message="parentMessage"></child-component>

子组件：

props: ['message']

自定义事件

子组件通过 $emit 触发事件，父组件监听事件并接收数据。

子组件：

this.$emit('custom-event', data)

父组件：

<child-component @custom-event="handleEvent"></child-component>

Vuex 状态管理

对于全局状态管理，可以使用 Vuex 存储和获取数据。

存储数据：

this.$store.commit('setData', data)

获取数据：

this.$store.state.data

Provide/Inject

适用于祖先组件向深层子组件传递数据。

祖先组件：

provide() {
  return {
    sharedData: this.data
  }
}

后代组件：

inject: ['sharedData']

Event Bus

创建一个中央事件总线来实现非父子组件间的通信。

创建 Event Bus：

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

发送事件：

EventBus.$emit('event-name', data)

接收事件：

EventBus.$on('event-name', data => {
  // 处理数据
})

$attrs 和 $listeners

适用于高阶组件封装，可以传递未被 props 识别的属性和事件。

父组件：

<child-component v-bind="$attrs" v-on="$listeners"></child-component>

传参方式选择建议

• 父子组件通信优先使用 props 和自定义事件
• 跨层级组件通信考虑 provide/inject 或 Vuex
• 非父子组件通信可以使用 Event Bus 或 Vuex
• 需要 URL 共享的状态使用路由传参
• 复杂应用推荐使用 Vuex 进行状态管理

每种方法都有其适用场景，根据具体需求选择最合适的方式。