在Vue 3中，defineExpose、defineProps和defineEmits是Composition API的三个核心函数，它们用于在单文件组件（SFC）内管理props、状态和事件。
defineProps()：用于定义组件的props，并将其作为响应式引用。defineExpose()：用于定义子组件公开的属性和方法，使得父组件可以访问。defineEmits()：用于定义组件可以触发的事件，以便可以在子组件中触发这些事件。
下面是一个使用这些函数的简单例子：
<template>
<div>
<h1>{{ title }}</h1>
<ChildComponent @child-event="parentEventHandler" />
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
import ChildComponent from './ChildComponent.vue'
const props = defineProps({
title: String
})
const emit = defineEmits(['child-event'])
function parentEventHandler() {
emit('child-event', 'data from parent')
}
</script>子组件 (ChildComponent.vue):
<template>
<button @click="sendEventToParent">Send Event to Parent</button>
</template>
<script setup>
import { defineExpose } from 'vue'
const exposedData = 'exposed data'
defineExpose({ exposedData })
function sendEventToParent() {
this.$emit('child-event', 'data from child')
}
</script>在这个例子中，父组件定义了一个名为title的prop，并且可以触发child-event事件。子组件通过defineExpose公开了一个名为exposedData的属性，并且可以通过点击按钮触发一个名为child-event的事件。父组件通过事件处理函数parentEventHandler来处理这个事件。