vue3中组合式测试深入组件—事件与$emit()

一、语法(props)

第一步：在组件模板表达式中，可以直接用$emit()方法触发自定义事件，

<!-- MyComponent --> <button @click="$emit('someEvent')">Click Me</button>

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

<MyComponent @some-event="callback" /> //组件的事件监听器也支持 .once 修饰符： <MyComponent @some-event.once="callback" /> 注意：

1.1、像组件与prop一样，事件名字也提供了自动格式转换，上面触发了一个camelCase形式命名的事件，但在父组件中可以使用kebab-case形式监听

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

二、事件参数 // 子组件 <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() 宏来声明它要触发的事件：

<script setup> defineEmits(['inFocus', 'submit']) </script> 注意：

      我们在 <template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，但 defineEmits() 会返回一个相同作用的函数供我们使用：