面试题：Vue组件化中如何规范组件通信以提升团队协作效率

父子组件通信

props 与 $emit
- 通信方式：父组件通过 props 向子组件传递数据，子组件通过 $emit 触发自定义事件向父组件传递数据。
- 团队协作规范：
  - 在团队开发文档中明确 props 的名称、类型、默认值及含义，例如在 Vue 组件定义时，使用 JSDoc 风格注释：

/**
 * @param {string} title - 子组件显示的标题
 * @default '默认标题'
 */
props: ['title']

    - 子组件触发自定义事件时，事件名采用语义化命名，如 `update:data`，并在文档中说明该事件的触发时机和传递数据的格式。
    - 父组件监听子组件事件时，确保事件处理逻辑清晰，避免在一个方法中处理过多复杂逻辑。例如：

<template>
  <ChildComponent @update:data="handleChildUpdate"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  methods: {
    handleChildUpdate(data) {
      // 处理子组件传递的数据逻辑
    }
  }
}
</script>

$parent 与 $children
- 通信方式：子组件通过 $parent 访问父组件实例，父组件通过 $children 访问子组件实例。
- 团队协作规范：
  - 尽量少用 $parent 和 $children，因为这种方式耦合度较高，不利于组件的复用和维护。若必须使用，在团队内部明确使用场景，并在组件文档中注明。
  - 访问子组件实例时，确保操作的方法或数据是公开的，避免直接访问子组件的私有属性和方法。例如：

// 父组件
export default {
  mounted() {
    this.$children[0].publicMethod();
  }
}
// 子组件
export default {
  methods: {
    publicMethod() {
      // 公开方法的逻辑
    }
  }
}

兄弟组件通信

事件总线（Event Bus）
- 通信方式：创建一个空的 Vue 实例作为事件总线，兄弟组件通过该实例的 $on 和 $emit 方法进行通信。
- 团队协作规范：
  - 在团队项目中统一管理事件总线，例如在 main.js 中创建事件总线实例：

import Vue from 'vue';
export const eventBus = new Vue();

    - 事件名称采用全局唯一且语义化的命名，避免冲突。在团队文档中记录每个事件的名称、触发时机、传递数据格式等。
    - 组件销毁时，及时解绑事件，防止内存泄漏。例如：

import { eventBus } from '@/main';
export default {
  created() {
    eventBus.$on('brother-event', this.handleBrotherEvent);
  },
  beforeDestroy() {
    eventBus.$off('brother-event', this.handleBrotherEvent);
  },
  methods: {
    handleBrotherEvent(data) {
      // 处理兄弟组件传递的数据逻辑
    }
  }
}

Vuex
- 通信方式：通过 Vuex 管理应用的状态，兄弟组件共享状态并通过提交 mutation 来修改状态。
- 团队协作规范：
  - 制定严格的 Vuex 模块划分规则，按照业务模块划分 state、mutation、action 等，例如用户相关的状态和操作放在 user 模块，商品相关放在 product 模块。
  - 对每个 mutation 和 action 进行详细的文档注释，说明其功能、参数及调用时机。例如：

// user.js Vuex模块
/**
 * 设置用户信息
 * @param {Object} state - Vuex状态对象
 * @param {Object} userInfo - 用户信息对象
 */
export const SET_USER_INFO = (state, userInfo) => {
  state.user = userInfo;
};

    - 团队成员遵循单向数据流原则，避免直接修改 state，而是通过 mutation 来更新状态，确保状态变化可追踪。

星途面试题库

面试题：Vue组件化中如何规范组件通信以提升团队协作效率

知识考点

面试题答案

父子组件通信

兄弟组件通信