【笔记】vue3.2 组件自定义事件

在vue3.x中，组件自定义时间是通过上下文context来调取得，而这个context也是在setup(props, context)中，那vue3.2在把setup写到<script>标签后，该如何使用呢？

在vue3.2中，提供了defineEmits语法糖，可以用来定义事件的名字，废话不多说，上例子。

<!-- 子组件 child.vue -->
<script setup>
const emit = defineEmits(['custom-event'])

const callEvent = () => {
  const now = new Date()
  emit('custom-event', now)
}
</script>

<template>
  <button @click="callEvent">点击</button>
</template>

<!-- 父组件 parent.vue -->
<script setup>
import child from './child.vue'

const handleCustomEvent = (val) => {
  console.log(val)
}
</script>

<template>
  <child @custom-event="handleCustomEvent"></child>
</template>

以上，便展示了组件自定义事件的使用。