vue3 子组件触发父组件时间

在 Vue 3 中，子组件可以通过 `$emit` 方法触发父组件的自定义事件。以下是一个简单的示例：

在父组件中，你可以通过在子组件上绑定一个自定义事件处理器来监听子组件触发的事件。例如：

<template>
  <div>
    <child-component @customEvent="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(eventData) {
      // 处理子组件触发的事件
      console.log(eventData);
    }
  }
}
</script>

在子组件中，你可以使用 `$emit` 方法来触发自定义事件，并传递需要传递给父组件的数据。例如：

<template>
  <button @click="triggerEvent">触发事件</button>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      // 触发自定义事件并传递数据给父组件
      this.$emit('customEvent', 'Hello from child component!');
    }
  }
}
</script>

在这个例子中，当子组件的按钮被点击时，`triggerEvent` 方法会触发自定义事件 `customEvent`，并将 `'Hello from child component!'` 作为数据传递给父组件的事件处理器 `handleEvent`。父组件中的 `handleEvent` 方法会打印出这个字符串。

这就是Vue 3中子组件触发父组件事件的基本方法。希望对你有所帮助！如果还有其他问题，请随时提问。