vue实现页面传值
使用 Props 父子组件传值
父组件通过 v-bind 或简写 : 向子组件传递数据，子组件通过 props 接收。父组件中定义数据并绑定到子组件标签上：
<template>
<ChildComponent :message="parentMessage" />
</template>
<script>
export default {
data() {
return {
parentMessage: 'Hello from parent'
}
}
}
</script>子组件声明 props 接收数据：
<script>
export default {
props: ['message'],
mounted() {
console.log(this.message) // 输出: Hello from parent
}
}
</script>使用自定义事件子传父
子组件通过 $emit 触发事件，父组件通过 v-on 或简写 @ 监听事件。子组件触发事件并传递数据：
<template>
<button @click="sendData">Send to Parent</button>
</template>
<script>
export default {
methods: {
sendData() {
this.$emit('child-event', { data: 'Child data' })
}
}
}
</script>父组件监听事件并处理数据：
<template>
<ChildComponent @child-event="handleChildEvent" />
</template>
<script>
export default {
methods: {
handleChildEvent(payload) {
console.log(payload.data) // 输出: Child data
}
}
}
</script>使用 Vuex 状态管理
适合跨层级或复杂组件通信。定义 store 并管理共享状态：
// store.js
import { createStore } from 'vuex'
export default createStore({
state: {
sharedData: null
},
mutations: {
setData(state, payload) {
state.sharedData = payload
}
}
})组件中提交 mutation 更新状态：
this.$store.commit('setData', 'Global data')组件中通过计算属性获取状态：
computed: {
sharedData() {
return this.$store.state.sharedData
}
}使用 Event Bus 跨组件通信
创建全局事件总线实现任意组件间通信。创建 eventBus.js：
import { createApp } from 'vue'
export const eventBus = createApp({})组件A发送事件：
import { eventBus } from './eventBus'
eventBus.config.globalProperties.$emit('custom-event', 'Event data')组件B监听事件：
import { eventBus } from './eventBus'
eventBus.config.globalProperties.$on('custom-event', (data) => {
console.log(data) // 输出: Event data
})使用路由参数传值
通过路由的 params 或 query 传递数据。定义路由时声明参数：
const routes = [
{ path: '/user/:id', component: User }
]跳转时传递参数：
this.$router.push({ path: '/user/123' })
// 或通过query
this.$router.push({ path: '/user', query: { id: 123 } })目标组件获取参数：
this.$route.params.id // 获取params
this.$route.query.id // 获取query使用 provide/inject 跨层级传值
祖先组件通过 provide 提供数据：
export default {
provide() {
return {
providedData: 'Data from ancestor'
}
}
}后代组件通过 inject 获取数据：
export default {
inject: ['providedData'],
mounted() {
console.log(this.providedData) // 输出: Data from ancestor
}
}使用 $refs 直接访问组件
父组件通过 ref 属性获取子组件实例：
<template>
<ChildComponent ref="childRef" />
<button @click="callChildMethod">Call Child</button>
</template>
<script>
export default {
methods: {
callChildMethod() {
this.$refs.childRef.childMethod()
}
}
}
</script>子组件定义方法：
export default {
methods: {
childMethod() {
console.log('Child method called')
}
}
}
