defineProps和defineEmits的区别

`defineProps` 和 `defineEmits` 是 Vue.js 中的两个关键特性，它们用于管理组件的属性（props）和事件（emits），但各自的作用域和用法有所不同。

1. `defineProps`:
- **功能**: `defineProps` 是在组件的选项对象中定义静态的、父组件传入的数据属性。这是单向数据流的一部分，用于描述组件期望接收的props类型和默认值。
- **使用**: 当父组件实例化时，将props传递给子组件。子组件通过 `this.props` 访问这些属性。
- **例子**:

     const MyComponent = {
       props: {
         message: { type: String, required: true }, // 声明一个字符串类型的message prop，必需传递
         color: { type: String, default: 'black' } // 默认值为黑色
       }
     }

- **相关问题**:
1. 什么情况下使用`defineProps`?
2. 如何在Vue组件中验证props?
3. 如何在父组件中向子组件传递props？

2. `defineEmits`:
- **功能**: `defineEmits` 是 Vue 3.0 引入的一个新特性，用于在组件内部定义自定义事件（emit）。它允许组件声明哪些事件可以被触发，并且可以预先定义这些事件的签名（参数类型）。
- **使用**: 子组件通过 `this.$emit` 触发事件，父组件监听并处理这些事件。
- **例子**:

     const MyComponent = {
       emits: ['customEvent', 'anotherEvent'], // 定义可以触发的事件
     }

- **相关问题**:
1. `defineEmits` 何时开始在 Vue 项目中推荐使用？
2. 如何在父组件中监听子组件的自定义事件？
3. `defineEmits` 对于事件管理有什么优点？

总结来说，`defineProps` 主要是用于管理从父组件传入的输入数据，而 `defineEmits` 则是用于管理组件自身的事件输出。