前提：封装组件是前端开发必备的，所以父子组件的通信相当重要，接下来总结下vue3父子组件通信的知识点，使用<script setup>语法糖

一、defineProps 和 defineEmits 

在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的

withDefaults 辅助函数提供了对默认值的类型检查，并确保返回的 props 的类型删除了已声明默认值的属性的可选标志。

/****************
**** 子组件 *****
****************/
<script setup>
/* 普通写法 */
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])

/* Typescript写法 */
const props = defineProps<{
  foo: string
  bar?: number
}>()

// withDefaults提供默认值
interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

handleClick() { // 通信给父组件
  emit('change', 1)
}
</script>

<!-- 父组件 -->
<template>
  <FormList foo="foo" @change="change">
</template>

二、defineExpose 暴露参数或方法给父组件使用

/****************
**** 子组件 *****
****************/
<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

const c = () => {
  console.log(a)
}

defineExpose({
  a,
  b,
  c
})
</script>

<!-- 父组件 -->
<script setup>
import { ref, onMounted } from 'vue'

const formList = ref(null)

onMounted(() => {
  console.log(formList.value.a)
  formList.value.c()
})
</script>
<template>
  <FormList ref="formList">
</template>

总结：其实和vue2差不多，理解起来也不难