父组件通过属性（props）向子组件传递数据，子组件通过事件（events）与父组件通信

我们有一个父组件和一个子组件（UserDepartmentEditor）。父组件通过属性（props）向子组件传递数据，子组件通过事件（events）与父组件通信。下面我将详细解释这个过程，并提供一个企业级实用教程。
### 1. 父组件向子组件传递数据（Props）
在父组件中，我们使用子组件并传递两个props：`show`和`user`。
```vue
<UserDepartmentEditor
v-model:show="showDepartmentEditor"
:user="editingUser"
@department-updated="handleDepartmentUpdated"
@cancel="showDepartmentEditor = false"
/>
```
- `v-model:show="showDepartmentEditor"`：这是Vue3中支持多个v-model的写法，相当于同时传递了prop `show` 和监听 `update:show` 事件。它等价于：
```vue
:show="showDepartmentEditor"
@update:show="newValue => showDepartmentEditor = newValue"
```
- `:user="editingUser"`：将父组件中的`editingUser`数据传递给子组件的`user` prop。
在子组件中，我们通过`defineProps`接收这些props：
```typescript
const props = defineProps({
show: {
type: Boolean,
required: true,
},
user: {
type: Object as () => UserProfile | null,
required: true,
},
})
```
### 2. 子组件向父组件发送事件（Emits）
在子组件中，我们定义了三个事件：
```typescript
const emit = defineEmits(['update:show', 'department-updated', 'cancel'])
```
- `update:show`：用于更新父组件中`showDepartmentEditor`的值（与v-model配合）。
- `department-updated`：当部门更新完成后触发，父组件可以在此事件中处理更新后的逻辑。
- `cancel`：当用户取消编辑时触发。
在子组件内部，我们可以在适当的时候触发这些事件，例如：
```typescript
// 当需要关闭对话框时
emit('update:show', false)
// 当部门更新成功时
emit('department-updated', updatedDepartment)
// 当用户点击取消按钮时
emit('cancel')
```
父组件中通过`@department-updated`和`@cancel`来监听这些事件：
```vue
<UserDepartmentEditor
...
@department-updated="handleDepartmentUpdated"
@cancel="showDepartmentEditor = false"
/>
```
### 3. 企业级实用教程
#### 3.1 Props 设计规范
1. **类型声明**：始终为props声明类型，这可以提高代码可读性和类型安全。
2. **必需性**：明确标记prop是否必需（`required: true/false`）。如果prop不是必需的，应该提供默认值。
3. **默认值**：对于非必需的prop，使用`default`属性提供默认值。
4. **复杂对象**：对于对象或数组，应该使用工厂函数返回默认值（如果提供默认值的话）。
5. **自定义验证**：在需要时，可以使用`validator`函数对prop进行验证。
示例：
```typescript
defineProps({
user: {
type: Object as PropType<UserProfile | null>,
required: true,
},
maxItems: {
type: Number,
default: 10,
},
items: {
type: Array as PropType<string[]>,
default: () => [],
},
status: {
type: String,
validator: (value: string) => ['active', 'inactive'].includes(value),
default: 'active'
}
})
```
#### 3.2 Emits 设计规范
1. **事件命名**：事件名应该采用kebab-case（因为HTML不区分大小写）。例如：`department-updated`。
2. **明确事件参数**：在定义emits时，最好定义每个事件的参数类型，这样在组件内部触发事件时可以获得类型检查。
3. **使用类型声明**：在TypeScript中，我们可以使用接口来定义事件参数。
示例（使用TypeScript）：
```typescript
const emit = defineEmits<{
(e: 'update:show', value: boolean): void
(e: 'department-updated', department: Department): void
(e: 'cancel'): void
}>()
```
#### 3.3 v-model 的高级用法
在Vue3中，我们可以支持多个v-model绑定。例如，如果子组件有多个需要双向绑定的属性，可以这样写：
```vue
<ChildComponent v-model:first="first" v-model:second="second" />
```
在子组件中，我们需要定义两个props：`first`和`second`，并在需要更新时触发`update:first`和`update:second`事件。
#### 3.4 企业级最佳实践
1. **Props 保持只读**：在子组件中不要直接修改props的值，而是通过触发事件让父组件去修改。
2. **事件命名语义化**：事件名应该清晰表达发生了什么，而不是如何实现的。例如，`department-updated`比`update`更明确。
3. **组件松耦合**：父组件不应该对子组件的内部实现有过多假设，子组件只通过事件通知父组件发生了什么，父组件决定如何响应。
4. **使用TypeScript**：在大型项目中，使用TypeScript可以显著提高代码的可维护性和减少错误。
5. **文档化**：为组件的props和events提供清晰的文档说明，可以使用JSDoc或专门的文档工具（如Storybook）。
#### 3.5 示例：完整子组件逻辑
```vue
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import type { PropType } from 'vue'
// 定义类型
interface UserProfile {
id: number
name: string
department: string
}
// Props
const props = defineProps({
show: {
type: Boolean,
required: true
},
user: {
type: Object as PropType<UserProfile | null>,
required: true
}
})
// Emits
const emit = defineEmits<{
(e: 'update:show', value: boolean): void
(e: 'department-updated', department: string): void
(e: 'cancel'): void
}>()
// 关闭对话框
const closeDialog = () => {
emit('update:show', false)
}
// 保存部门
const saveDepartment = () => {
// 假设我们有一个新的部门值
const newDepartment = 'IT'
emit('department-updated', newDepartment)
closeDialog()
}
// 取消
const cancel = () => {
emit('cancel')
closeDialog()
}
</script>
```
### 4. 总结
- **父传子**：通过props传递数据，子组件通过defineProps接收。
- **子传父**：子组件通过defineEmits定义事件，并在适当的时候触发（emit），父组件通过@事件名监听并处理。
- **双向绑定**：使用`v-model:propName`实现多个属性的双向绑定，内部通过`update:propName`事件实现。
通过遵循上述规范，可以创建出可维护、可重用且类型安全的组件。请整理为漂亮文档