vue3 采用script setup写法 实现 父组件 响应子组件事件 使用 provide inject

在Vue3中，可以使用`script setup`语法来编写组件。在`script setup`中，可以使用`defineEmits`定义组件可以发出的事件，以及使用`defineExpose`来将组件的状态和方法暴露给父组件。

接下来，我们可以在父组件中使用`provide`来向子组件提供一个响应事件的方法，然后在子组件中使用`inject`来获取这个方法，并在需要的时候进行调用。

下面是一个示例代码：

<template>
  <div>
    <p>子组件发出的事件：{{ message }}</p>
    <Child @emit-message="handleMessage" />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import Child from './Child.vue'

// 定义组件可以发出的事件
const emitMessage = defineEmits(['emit-message'])

// 定义状态和方法
const message = ref('')

// 提供一个响应事件的方法
const handleMessage = (msg) => {
  message.value = msg
}

// 将方法提供给子组件
provide('handle-message', handleMessage)
</script>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    // 响应子组件发出的事件
    handleMessage(msg) {
      this.message = msg
    }
  }
}
</script>

在上面的代码中，父组件提供了一个名为`handle-message`的方法，子组件可以使用`inject`来获取这个方法并在需要的时候进行调用。父组件使用了`defineEmits`来定义了一个`emit-message`事件，子组件可以通过调用`emit`方法来触发这个事件。在父组件中，我们通过`@emit-message="handleMessage"`来监听子组件发出的事件，并在事件触发时调用`handleMessage`方法来更新状态。