Vue3-21-组件-子组件给父组件发送事件

情景描述

【子组件】中有一个按钮，点击按钮，触发一个事件，
我们希望这个事件的处理逻辑是，给【父组件】发送一条消息过去，
从而实现 【子组件】给【父组件】通信的效果。

这个问题的解决就是 “发送事件” 这个操作。
本文就针对此操作进行详细的介绍。

子组件发送事件的两种方式

【子组件】 发送事件有两种方式：
方式一 ： html模板中直接使用 “$emit” 的方式发送事件；
方式二 ： 使用“defineEmits()” 来声明要发送的事件。
      
【子组件】在发送事件的时候也可以携带参数。
【defineEmits() 声明式的方式 可以进行类型参数的定义】

下面是案例代码：

方式一 ：$emit 直接发送事件

$emit() 可以在html模板中直接使用
$emit() 的第一个参数是 发送的事件的名称，【推荐使用驼峰命名法进行命名】
$emit() 从第二个参数开始是 发送事件所携带的参数，父组件中可以直接获取到

1、无参数

子组件