vue实现传递参数
Vue 实现传递参数的几种方法
在 Vue 中传递参数可以通过多种方式实现，具体取决于组件之间的关系和场景需求。
父组件向子组件传递参数（Props）
父组件通过 props 向子组件传递数据。子组件需要在 props 选项中声明接收的属性。
父组件代码：
<template>
<ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
data() {
return {
parentMessage: 'Hello from parent'
}
}
}
</script>子组件代码：
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
}
</script>子组件向父组件传递参数（自定义事件）
子组件通过 $emit 触发自定义事件，父组件监听该事件并接收参数。
子组件代码：
<template>
<button @click="sendMessage">Send</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello from child')
}
}
}
</script>父组件代码：
<template>
<ChildComponent @message-sent="handleMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
methods: {
handleMessage(msg) {
console.log(msg) // 'Hello from child'
}
}
}
</script>兄弟组件间传递参数（Event Bus）
创建全局事件总线实现任意组件间通信。
创建 eventBus.js：
import Vue from 'vue'
export const EventBus = new Vue()发送组件：
import { EventBus } from './eventBus'
EventBus.$emit('event-name', data)接收组件：
import { EventBus } from './eventBus'
EventBus.$on('event-name', data => {
console.log(data)
})Vuex 状态管理传递参数
对于复杂应用，可以使用 Vuex 进行全局状态管理。
store.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
sharedData: null
},
mutations: {
setSharedData(state, payload) {
state.sharedData = payload
}
}
})组件设置数据：
this.$store.commit('setSharedData', 'some data')组件获取数据：
this.$store.state.sharedData路由参数传递
通过 Vue Router 可以在路由间传递参数。
声明式导航：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>编程式导航：
this.$router.push({ name: 'user', params: { userId: 123 } })接收参数：
this.$route.params.userId查询参数方式：
this.$router.push({ path: 'register', query: { plan: 'private' } })接收查询参数：
this.$route.query.planprovide/inject 跨层级传递
祖先组件通过 provide 提供数据，后代组件通过 inject 接收。
祖先组件：
export default {
provide() {
return {
theme: 'dark'
}
}
}后代组件：
export default {
inject: ['theme'],
created() {
console.log(this.theme) // 'dark'
}
}每种方法适用于不同场景，props/emit 适合父子组件通信，Event Bus 适合简单场景的任意组件通信，Vuex 适合复杂状态管理，路由参数适合页面间传参，provide/inject 适合跨多级组件传值。
