Vue2 组件间数据传递模式详解

在 Vue2 开发中，组件间的数据传递是构建复杂应用的基础。本文将深入探讨 Vue2 中各种组件通信模式，帮助开发者根据场景选择最佳方案。

一、父子组件通信

1. props 与 $emit 的显式数据流

概念解释：这是 Vue 中最基础的父子组件通信方式，遵循"单向数据流"原则 - 父组件通过 props 向下传递数据，子组件通过 $emit 向上触发事件。

// 父组件
<template>
  <child-component :message="parentMsg" @update="handleUpdate"/>
</template>

<script>
export default {
  data() {
    return {
      parentMsg: 'Hello from parent'
    }
  },
  methods: {
    handleUpdate(newMsg) {
      this.parentMsg = newMsg
    }
  }
}
</script>

// 子组件
<script>
export default {
  props: ['message'],
  methods: {
    sendToParent() {
      this.$emit('update', 'New message from child')
    }
  }
}
</script>

实践建议：

• 始终为 props 定义明确的类型和默认值
• 避免在子组件中直接修改 props，应该通过事件通知父组件修改
• 复杂对象作为 props 时，考虑使用深拷贝避免意外修改

2. .sync 修饰符（Vue2 特有语法糖）

概念解释：.sync 是 Vue2 提供的一种语法糖，简化了父子组件双向绑定的实现。

// 父组件
<child-component :title.sync="pageTitle"/>

// 等价于
<child-component 
  :title="pageTitle" 
  @update:title="pageTitle = $event"
/>

// 子组件
this.$emit('update:title', newTitle)

实践建议：

• 适用于简单的双向绑定场景
• 对于复杂数据逻辑，建议仍使用显式的 props/$emit
• Vue3 中已被 v-model 替代，考虑未来兼容性

3. v-model 在自定义组件中的扩展

概念解释：v-model 默认用于表单元素双向绑定，在自定义组件中可通过 model 选项配置。

// 自定义输入组件
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value'],
  methods: {
    handleInput(e) {
      this.$emit('change', e.target.value)
    }
  }
}

// 使用方式
<custom-input v-model="inputValue"/>

实践建议：

• 统一组件与原生表单元素的 v-model 使用体验
• 适用于需要类似表单输入行为的自定义组件
• Vue3 中 v-model 能力大幅增强，可支持多个 v-model

二、跨层级组件通信

1. provide / inject（依赖注入的上下文传递）

概念解释：provide/inject 允许祖先组件向其所有后代组件注入依赖，无论组件层次有多深。

// 祖先组件
export default {
  provide() {
    return {
      theme: this.themeData
    }
  },
  data() {
    return {
      themeData: { color: 'blue' }
    }
  }
}

// 后代组件
export default {
  inject: ['theme'],
  created() {
    console.log(this.theme.color) // 'blue'
  }
}

实践建议：

• 适用于全局配置、主题、国际化等场景
• 注入的数据默认不是响应式的，需要特殊处理
• 避免滥用，会使组件关系变得不透明

2. 嵌套插槽的上下文传递（scoped slots 数据透传）

概念解释：通过作用域插槽，子组件可以将数据传递给父组件中的插槽内容。

// 子组件
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'John' }
    }
  }
}
</script>

// 父组件
<child-component>
  <template v-slot:default="slotProps">
    {{ slotProps.user.name }}
  </template>
</child-component>

实践建议：

• 适用于高度可定制的组件设计
• 可以实现"渲染委托"模式
• Vue3 中统一为 v-slot 语法

三、非父子组件通信

1. 全局事件总线（EventBus）的发布-订阅模式

概念解释：创建一个中央事件总线，组件通过它发布和订阅事件。

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 组件A - 发布事件
EventBus.$emit('message', 'Hello from A')

// 组件B - 订阅事件
EventBus.$on('message', (msg) => {
  console.log(msg) // 'Hello from A'
})

实践建议：

• 适用于简单应用或小型项目
• 注意及时移除事件监听，避免内存泄漏
• 大型项目建议使用 Vuex

2. Vuex 状态管理的集中式通信

概念解释：Vuex 是 Vue 的官方状态管理库，提供集中式存储管理应用的所有组件状态。

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

// 组件中使用
this.$store.commit('increment')
this.$store.dispatch('incrementAsync')

实践建议：

• 适用于中大型复杂应用
• 遵循单向数据流原则
• 模块化组织大型 store
• 考虑使用辅助函数(mapState, mapActions等)简化代码

总结对比

最佳实践建议：

1. 优先使用 props/$emit 处理父子组件通信
2. 简单跨组件共享使用 EventBus
3. 复杂应用状态使用 Vuex
4. 全局配置考虑 provide/inject
5. 保持数据流向清晰可追踪

通过合理选择这些通信模式，可以构建出结构清晰、维护性高的 Vue 应用。