vue3父组件触发事件调用子组件的数据

在 Vue 3 中，父组件想要通过触发一个自定义事件来访问或更新子组件的数据，可以按照以下步骤操作：

1. **创建自定义事件**：首先在父组件中定义一个自定义事件，通常是一个 `@` 符号前的事件名，比如 `@updateChildData`。

<template>
  <div>
    <!-- 父组件的内容 -->
    <child-component @updateChildData="handleChildUpdate"></child-component>
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

function handleChildUpdate(data) {
  // 这里处理接收到的数据
  console.log('Received data from child:', data);
}
</script>

2. **子组件响应事件**：在子组件中，需要监听这个自定义事件并提供一个方法来传递数据给父组件。可以在 `<script setup>` 部分定义这个方法。

<template>
  <button @click="emitData">Send Data to Parent</button>
</template>

<script setup>
export default {
  methods: {
    emitData() {
      this.$emit('updateChildData', /* 子组件的数据 */);
    }
  }
};
</script>

当点击按钮时，子组件会调用自己的 `emitData` 方法，这将触发 `updateChildData` 事件，并将数据传给父组件的 `handleChildUpdate` 函数。