vue实现参数的接受
在 Vue 中接受参数的几种方法
通过 props 接收父组件传递的参数
在子组件中定义 props 来接收父组件传递的数据。父组件通过属性绑定的方式传递数据。
// 子组件
export default {
props: ['message'],
template: '<div>{{ message }}</div>'
}
// 父组件
<template>
<ChildComponent message="Hello from parent" />
</template>使用 $route.params 接收路由参数
在 Vue Router 中，可以通过 $route.params 获取动态路由参数。
// 路由配置
const routes = [
{ path: '/user/:id', component: User }
]
// 组件中获取参数
export default {
mounted() {
console.log(this.$route.params.id)
}
}通过 $attrs 接收非 prop 属性
当父组件传递的属性没有被定义为 prop 时，可以通过 $attrs 访问这些属性。
// 子组件
export default {
created() {
console.log(this.$attrs.customAttr)
}
}使用事件总线或 Vuex 接收跨组件参数
对于跨层级组件通信，可以使用事件总线或状态管理工具如 Vuex。
// 事件总线示例
const bus = new Vue()
// 发送组件
bus.$emit('event-name', data)
// 接收组件
bus.$on('event-name', data => {
console.log(data)
})通过 provide/inject 接收祖先组件参数
祖先组件使用 provide 提供数据，后代组件使用 inject 注入数据。
// 祖先组件
export default {
provide() {
return {
sharedData: 'Some data'
}
}
}
// 后代组件
export default {
inject: ['sharedData'],
mounted() {
console.log(this.sharedData)
}
}参数验证与默认值
对于 props，可以添加类型验证和默认值设置。
props: {
message: {
type: String,
required: true,
default: 'Default message'
},
count: {
type: Number,
validator: value => value >= 0
}
}动态参数传递
使用 v-bind 或简写 : 可以动态传递参数。
<template>
<ChildComponent :dynamicProp="someData" />
</template>
<script>
export default {
data() {
return {
someData: 'Dynamic value'
}
}
}
</script>
