vue实现参数的接受
Vue 参数接收的实现方式
在 Vue 中接收参数通常涉及路由参数、组件 props 或状态管理（如 Vuex/Pinia）。以下是常见场景的具体实现方法：
路由参数接收
适用于通过 URL 传递参数的场景（如 /user/123）：
// 路由定义中配置动态参数
const routes = [
{ path: '/user/:id', component: User }
]
// 组件内通过 $route 获取
export default {
created() {
console.log(this.$route.params.id) // 输出如 "123"
}
}或使用 Vue Router 4.x 的组合式 API：
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.params.id)
}
}Props 接收参数
父组件向子组件传递数据时使用：
// 子组件声明 props
export default {
props: {
userId: {
type: String,
required: true
}
},
setup(props) {
console.log(props.userId)
}
}
// 父组件传递参数
<ChildComponent :userId="'123'" />事件总线（跨组件通信）
适用于非父子组件间的参数传递：
// 发送方
import emitter from './eventBus'
emitter.emit('updateUser', { id: 123 })
// 接收方
emitter.on('updateUser', (data) => {
console.log(data.id)
})Vuex/Pinia 状态管理
全局状态共享时使用：
// Pinia 示例
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({ id: null }),
actions: {
setUserId(id) {
this.id = id
}
}
})
// 组件中使用
const store = useUserStore()
store.setUserId('123')
console.log(store.id)URL 查询参数
获取如 ?name=John 这类参数：
// 通过 $route.query
console.log(this.$route.query.name)
// 组合式 API
const route = useRoute()
console.log(route.query.name)注意事项
- 路由参数需在路由配置中预先定义（如
:id） - Props 应明确类型验证，避免直接修改（使用 emit 通知父组件修改）
- 敏感数据避免通过 URL 传递
- 对于复杂应用，优先考虑状态管理工具
