面试题：Vue组件化开发中如何通过props设计高内聚低耦合的组件

Question

在Vue组件化开发里，props是父子组件通信的重要方式。请阐述如何合理设计props，以实现组件的高内聚低耦合？比如，在一个商品展示组件中，应该如何定义props来接收商品数据，同时保持该组件与父组件之间低耦合？

Answer 1

1. 明确props的类型和必要性

• 类型定义清晰：在Vue组件中，使用props选项时，对每个prop进行明确的类型定义。例如，商品展示组件接收商品数据时，如果商品价格是数字类型，可这样定义：

props: {
  productPrice: {
    type: Number,
    required: true
  }
}

• 必要性判断：只定义组件真正需要的数据作为props。对于商品展示组件，只接收与商品展示直接相关的数据，如商品名称、价格、图片链接等，避免接收无关数据，像用户的登录状态等，从而减少不必要的耦合。

2. 避免props的双向绑定

• 单向数据流原则：Vue遵循单向数据流，即父组件通过props向子组件传递数据，子组件不应直接修改props。在商品展示组件中，若商品数据需要修改，应由父组件处理后再通过props传递给子组件。这样可以保持数据流向清晰，降低组件间的耦合。

3. 使用对象或数组解构来组织props

• 合理分组：如果商品展示组件需要接收多个props，可以将相关的props组合成一个对象或数组，然后在组件中进行解构。例如：

props: {
  productInfo: {
    type: Object,
    required: true
  }
}
// 在模板中使用
<template>
  <div>
    <p>{{ productInfo.name }}</p>
    <p>{{ productInfo.price }}</p>
  </div>
</template>

这样，当商品数据结构发生变化时，只需修改对象的结构，而组件内部的使用方式不需要大量改动，增强了组件的内聚性，降低了与父组件的耦合。

4. 提供默认值

• 增强组件独立性：为props提供合理的默认值，这样即使父组件没有传入某些props，组件依然可以正常工作。例如商品展示组件中，若有一个是否显示促销标签的prop：

props: {
  showPromotionLabel: {
    type: Boolean,
    default: false
  }
}

通过提供默认值，减少了组件对父组件传入数据的依赖，提高了组件的内聚性和复用性。