当前位置：首页 > news >正文

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

news 来源：原创 2025/6/21 9:20:23

一、语法(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>

注意：

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

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

2. defineEmits() 宏不能再子函数中使用，必须在<script setup>的顶级作用域下

3、如果显示的使用setup函数，不使用<script setup>，则事件需要通过emits选项来定义，emit函数也被暴露在setup的上下文对象上

export default {
emits: ['inFocus', 'submit'],
setup(props, ctx) {
ctx.emit('submit')
}
}

3、emits 选项和 defineEmits() 宏还支持对象语法

四、事件校验

和对 props 添加类型校验的方式类似，所有触发的事件也可以使用对象形式来描述。

要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 emit 的内容，返回一个布尔值来表明事件是否合法。

<script setup>
const emit = defineEmits({
  // 没有校验
  click: null,

  // 校验 submit 事件
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('Invalid submit event payload!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>