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')
    }
  }
}