vue实现组件传递数据

Vue 组件间数据传递方法

Props 传递数据（父传子）
父组件通过 v-bind 向子组件传递数据，子组件通过 props 接收。
父组件示例：

<template>
  <ChildComponent :message="parentMessage" />
</template>
<script>
export default {
  data() {
    return { parentMessage: 'Hello from parent' }
  }
}
</script>

子组件示例：

<script>
export default {
  props: ['message']
}
</script>

自定义事件（子传父）
子组件通过 $emit 触发事件，父组件通过 v-on 监听。
子组件示例：

<template>
  <button @click="$emit('update', newValue)">Send</button>
</template>

父组件示例：

<template>
  <ChildComponent @update="handleUpdate" />
</template>
<script>
export default {
  methods: {
    handleUpdate(value) {
      console.log(value)
    }
  }
}
</script>

Provide/Inject（跨层级传递）
祖先组件通过 provide 提供数据，后代组件通过 inject 注入。
祖先组件示例：

<script>
export default {
  provide() {
    return { theme: 'dark' }
  }
}
</script>

后代组件示例：

<script>
export default {
  inject: ['theme']
}
</script>

Vuex/Pinia（状态管理）
适用于复杂应用全局状态共享。以 Pinia 为例：
定义 store：

import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
  state: () => ({ count: 0 })
})

组件中使用：

<script setup>
import { useStore } from './store'
const store = useStore()
</script>
<template>
  {{ store.count }}
</template>

Event Bus（小型项目适用）
创建全局事件总线（Vue 2 适用）：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

组件 A 发送事件：

EventBus.$emit('event-name', data)

组件 B 接收事件：

EventBus.$on('event-name', data => {})

$attrs/$listeners（高阶传递）
适用于透传属性和事件。
父组件：

<Child v-bind="$attrs" v-on="$listeners" />

本地存储或 URL
通过 localStorage 或路由参数传递：

// 存储
localStorage.setItem('key', data)
// 读取
const data = localStorage.getItem('key')

注意事项

• 单向数据流：Props 应避免直接修改，推荐用事件通知父组件变更
• 深层次嵌套优先考虑 Vuex/Pinia
• 事件总线需注意及时销毁监听避免内存泄漏