Vue3 从入门到放弃 （第五篇.组件事件与v-model使用）

上一篇讲到了props的使用。今天讲一讲组件事件以及我们做项目常常遇到的问题.

Vue3 从入门到放弃 （第四篇.Props使用）_Meta.Qing的博客-CSDN博客

触发与监听事件#

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：

<button @click="$emit('someEvent')">click mebutton>

父组件可以通过 v-on (缩写为 @) 来监听事件：

<MyComponent @some-event="callback" />

同样，组件的事件监听器也支持 .once 修饰符：

<MyComponent @some-event.once="callback" />

像组件与 prop 一样，事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式prop 大小写格式prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。

提示:和原生 DOM 事件不一样，组件触发的事件没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案全局状态管理方案全局状态管理方案。

事件参数

有时候我们会需要在触发事件时附带一个特定的值。举例来说，我们想要  组件来管理文本会缩放得多大。在这个场景下，我们可以给 $emit 提供一个额外的参数：

<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>

然后我们在父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此函数会接收到事件附带的参数：

<MyButton @increase-by="(n) => count += n" />

或者，也可以用一个组件方法来作为事件处理函数：

<MyButton @increase-by="increaseCount" />

该方法也会接收到事件所传递的参数：

function increaseCount(n) {
  count.value += n
}

提示:所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说，$emit('foo', 1, 2, 3) 触发后，监听器函数将会收到这三个参数值。

声明触发的事件#

组件要触发的事件可以显式地通过 defineEmits()defineEmits()defineEmits() 宏来声明：

我们在