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
- 事件总线需注意及时销毁监听避免内存泄漏
