vue中组件之间进行传值

Vue 中组件之间进行传值（图表形式）

方式	图标	特点	示例	适用场景
父组件向子组件传值	⬇️	通过 props 传递数据	父组件: <ChildComponent :data="data" /> 子组件: <props :data="data" />	父组件拥有数据所有权，需要向子组件传递数据
子组件向父组件传值	⬆️	通过 $emit 事件传递数据	子组件: this.$emit('updateData', data) 父组件: <ChildComponent @updateData="updateData" />	子组件需要向父组件传递数据，例如更新父组件数据
兄弟组件之间传值	↔️	通过 Vuex 状态管理	组件 A: this.$store.commit('setData', data) 组件 B: this.$store.getters.getData	组件之间需要共享数据，例如购物车数据
EventBus		通过 EventBus 事件总线传递数据	组件 A: EventBus.$emit('updateData', data) 组件 B: EventBus.$on('updateData', (data) => { ... })	组件之间关系复杂，不方便直接传递数据
Provide/Inject		通过 provide/inject 注入数据	组件 A: provide('data', data) 组件 B: inject('data')	组件之间存在父子关系，需要在多个子组件之间传递数据

以下是一些选择传值方式的建议:

• 父组件向子组件传值，可以使用 props。
• 子组件向父组件传值，可以使用 $emit 事件。
• 兄弟组件之间传值，可以使用 Vuex 或 EventBus。
• 组件之间存在父子关系，需要在多个子组件之间传递数据，可以使用 provide/inject。