vue实现传递参数
Vue 中传递参数的几种方法
通过路由传参（query 或 params）
使用 router-link 或编程式导航传递参数：
// query 传参（显示在 URL 中）
this.$router.push({ path: '/user', query: { id: 123 } })
// params 传参（需要路由配置 name）
this.$router.push({ name: 'user', params: { id: 123 } })接收参数：
// 接收 query 参数
this.$route.query.id
// 接收 params 参数
this.$route.params.id通过 props 传参
路由配置中开启 props：
{
path: '/user/:id',
component: User,
props: true // 将 params 转为 props
}组件中直接使用 props：
export default {
props: ['id']
}父子组件通信
父组件通过属性传递：
<child-component :message="parentMsg"></child-component>子组件通过 props 接收：
export default {
props: ['message']
}子父组件通信（自定义事件）
子组件触发事件：
this.$emit('update', newValue)父组件监听事件：
<child-component @update="handleUpdate"></child-component>使用 Vuex 状态管理
定义 state 和 mutation：
const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state, payload) {
state.count += payload.amount
}
}
})组件中提交 mutation：
this.$store.commit('increment', { amount: 10 })使用 Event Bus
创建 Event Bus：
export const EventBus = new Vue()发送事件：
EventBus.$emit('message', data)接收事件：
EventBus.$on('message', (data) => {
console.log(data)
})使用 provide/inject
祖先组件提供数据：
export default {
provide() {
return {
sharedData: this.sharedValue
}
}
}后代组件注入数据：
export default {
inject: ['sharedData']
}参数传递方式选择建议
- 简单父子组件通信：使用 props/$emit
- 跨层级组件通信：使用 provide/inject 或 Event Bus
- 页面间导航传参：使用路由参数
- 全局状态管理：使用 Vuex
- 非父子组件通信：Event Bus 或 Vuex
每种方法都有其适用场景，应根据具体需求选择最合适的方式。路由传参适合页面跳转时使用，props 适合父子组件通信，Vuex 适合全局状态管理。
