defineExpose 、defineProps、defineEmits --- vue3组件间通讯1

在Vue 3中，defineExpose、defineProps和defineEmits是Composition API的三个核心函数，它们用于在单文件组件（SFC）内管理props、状态和事件。

1. defineProps()：用于定义组件的props，并将其作为响应式引用。
2. defineExpose()：用于定义子组件公开的属性和方法，使得父组件可以访问。
3. 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来处理这个事件。