vue2.0组件之间怎么传值？组件传输方式浅析

Vue2.0组件间传值方式主要包括以下几种，适用于不同场景的组件通信需求：

1. Props与$emit组合
这是父子组件通信的核心方式。父组件通过props向子组件传递数据，子组件通过$emit触发父组件事件并传递数据。

• 父组件：在子组件标签绑定数据侍蠢神（如:child-data="childData"），并监听子组件事件（如@change-child="changeChild"）。
• 子组件：通过props接收数据（如props: ["child-data"]），通过this.$emit("change-child", newValue)触发父组件方法。
• 特点：单向数据流（子组件不可直接修改props），需配合$emit实现双向通信。

2. v-model语法糖
简化父子组件双向绑定，默认绑定value属性和input事件。

• 父组件：使用v-model="childData"绑定数据。
• 子组件：需声明props: ["value"]，并通过this.$emit("input", newValue)更新数据。
• 扩展：可通过model选项自定义属性名和事件名（老亏如prop: "childData"，event: "change-child"）。
• 限制：仅支持单个prop绑定，多绑定需结合.sync或Vuex。

3. .sync修饰符
实现多prop双向绑定，本质是prop+$emit的语法糖。

• 父组件：使用:child-data.sync="childData"绑定数据。
• 子组件：通过this.$emit("update:child-data", newValue)更新数据。
• 特点：Vue3中废弃，改用v-model多参数支持。

4. ref与$refs
父组件直接访问子组件实例，调用其方法或获取数据。

• 父组件：在子组件标签添加ref="child"，通过this.$refs.child.method()调用子组件方法。
• 特点：绕过props和事件，但破坏组件封装性，需谨慎使用。

5. $children与$parent
通过组件树直接访问子组件或父组件实例。

• 父组件：通过this.$children[0].method()访问第一个子组件。
• 子组件：通过this.$parent.method()访问父组件。
• 缺点：组件关系紧密耦合，维护性差，不推荐在大型项目中使用。

6. $attrs与$listeners
实现跨层级组件通信（如父→孙组件）。

• 父组件：将未在props中声明的属性通过v-bind="$attrs"传递给子组件。
• 子组件：继续通过v-bind="$attrs"向下传递，或通过v-on="$listeners"传递事件监听。
• 特点：需手动传递，适合简单跨层级场景。

7. provide与inject
祖先组件向后代组件提供数据，无需逐层传递。

• 祖先组件：通过provide()返回数据（如provide() { return { data: "value" } }）。
• 后代组件：通过inject: ["data"]获取数据。
• 缺点：数据非响应式，且难以追踪数据来源，适合静态配置或全局状态。

8. EventBus（中央事件总线）
通过全局事件总线实现任意组件通信。

• 实现：创建独立Bus.js文件，导出Vue实例，组件通过Bus.$emit和Bus.$on通信。
• 特点：适合小型项目或兄弟组件通信，但需手动管理事件监听，易导致内存泄漏。

9. Vuex状态管理
大型项目推荐使用，集中管理全局状态。

• 核心概念：通过state存储数据，mutations同步修改，actions异步操作，getters派生数据。
• 优势：响应式、可追踪、支持开发工具调试，适合复杂状态逻档键辑。

总结：

• 简单父子通信：优先使用props+$emit或v-model。
• 多prop双向绑定：Vue2中使用.sync，Vue3改用v-model多参数。
• 跨层级通信：小范围用$attrs/$listeners，大范围用provide/inject或Vuex。
• 全局状态：直接使用Vuex，避免EventBus的维护成本。