VUE组件设计、使用_组件的设计规范-优快云博客

本文链接：https://blog.youkuaiyun.com/CHINA_CXH_HN/article/details/145606533

vue组件设计规范

在 Vue 中设计一个组件时，遵循良好的规范和设计原则可以确保组件的可复用性、易维护性和一致性。以下是一些建议和最佳实践：

1. 组件的职责清晰

单一职责原则：每个组件应该只负责一个功能或逻辑，避免过度复杂。例如，一个按钮组件只负责按钮的显示和事件响应，而不是包含业务逻辑。
拆分大组件：如果一个组件过于复杂，考虑将其拆分成多个子组件。

2. 组件的命名

语义化命名：组件名称应该清晰表达组件的用途，例如 UserProfile 或 SearchBar。
命名规范

：
- 文件命名：通常使用 PascalCase 或 kebab-case，例如 UserProfile.vue 或 user-profile.vue。
- 组件名：推荐 PascalCase，如 <UserProfile />。

3. 组件的结构

按照以下顺序组织代码，提高可读性：

<template>
  <!-- 模板代码 -->
</template>

<script>
export default {
  name: "ComponentName",
  props: {},
  data() {},
  computed: {},
  methods: {},
  watch: {},
  mounted() {},
};
</script>

<style scoped>
/* 样式代码 */
</style>

模板 (<template>)：只包含视图层的 HTML 代码。
逻辑 (<script>)：负责处理组件的逻辑部分。
样式 (<style>)：建议使用 scoped 作用域，避免全局样式污染。

4. 使用 `props` 和 `emits`

传入参数（props）

使用 props 传递父组件数据，尽量为每个 prop 指定类型和默认值。

示例：

javascript复制代码props: {
  title: {
    type: String,
    required: true,
  },
  count: {
    type: Number,
    default: 0,
  },
}

事件传递（emits）

使用 emits 传递子组件事件，保持数据单向流动。

示例：

javascript复制代码emits: ['update'],
methods: {
  updateValue(value) {
    this.$emit('update', value);
  }
}

5. 避免直接操作父组件数据

使用 v-model 实现父子组件的双向绑定。
子组件通过 $emit 通知父组件更新数据，而不是直接修改。

6. 可复用性

抽象复用逻辑
- 使用混入（Mixin）或组合式 API（Composition API）提取重复的逻辑。
- 使用插槽（Slot）为组件提供更灵活的内容插入。
封装通用组件
- 将常用的按钮、模态框等组件抽象为通用组件。

7. 状态管理

如果组件状态较复杂，可以考虑使用 Vuex 或 Pinia 管理全局状态，而不是依赖组件嵌套传递。

8. 组件通信

父子通信：通过 props 和 emits。
非父子通信：
- 使用 Vuex/Pinia 管理状态。
- 使用事件总线（Vue 3 已不推荐）。
- 使用 provide 和 inject。

9. 性能优化

懒加载：对路由或组件使用按需加载（动态导入）。
事件销毁：确保在组件销毁时清理事件监听。
避免不必要的渲染：使用 v-if 和 v-show 控制渲染，避免性能浪费。

10. 文档和测试

文档：为每个组件编写清晰的注释和文档，说明组件用途和使用方法。
单元测试：使用 Jest 或 Vitest 为组件编写单元测试，验证组件行为。

输入框组件的分工

逻辑实现的分工

输入框组件（子组件）负责：

提供输入框的内容绑定（通过 v-model）。
提供按钮的点击事件接口（通过 emits）。

<script>
const emit = defineEmits(["",""])
const sendMessage = () => {
  console.log("子组件中的发送消息：",inputMessage.value);
  emit("send-message", inputMessage.value); //将用户输入的信息转递给父组件
};
</script>

不直接处理复杂的业务逻辑，而是将事件传递给父组件。

父组件负责：
- 具体的业务逻辑实现（例如上传附件、切换模型、新话题处理逻辑、发送消息）。
- 根据业务需求传递必要的 props 给子组件。
```
<script>
const handleSendMessage = async (userMessage)=>{
  console.log("父组件中的发送消息：",userMessage);
}
</script>
```

关键点解析

子组件职责
- 子组件专注于 UI 和事件的绑定。
- 按钮点击事件使用通用的 handleClick 方法，将按钮类型通过 emits 传递给父组件。
- 输入框内容通过 send 事件向父组件传递。
父组件职责
- 父组件实现具体业务逻辑，确保组件的单一职责。
- 不同按钮的业务逻辑通过 handleButtonClick 方法分开处理，便于维护和扩展。
扩展性
- 如果需要增加新功能按钮，只需在子组件中添加一个按钮，并为 handleClick 增加一个新的 type 即可，父组件相应更新逻辑。