vue3 script setup 中 父组件 响应子组件事件 通过 provide inject 写法实现

在 Vue3 中，可以使用 `provide` 和 `inject` 实现父组件响应子组件事件。

首先，在父组件中使用 `provide` 提供一个方法或数据：

<template>
  <div>
    <child @child-click="handleChildClick" />
  </div>
</template>

<script setup>
import Child from './Child.vue'

const handleChildClick = () => {
  // 处理子组件事件
}

provide('handleChildClick', handleChildClick)

</script>

然后，在子组件中使用 `inject` 注入父组件提供的方法或数据：

<template>
  <button @click="handleClick">点击触发父组件事件</button>
</template>

<script setup>
import { inject } from 'vue'

const handleChildClick = inject('handleChildClick')

const handleClick = () => {
  handleChildClick()
}

</script>

这样子组件中的点击事件就能够触发父组件中提供的方法，实现了父组件响应子组件事件的功能。