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() 会返回一个相同作用的函数供我们使用：