vue3调用父组件的方法

### Vue 3 中子组件调用父组件方法

在 Vue 3 中，子组件可以通过 `$emit` 方法触发自定义事件来通知父组件执行特定的操作。这种方式允许父子组件之间建立一种松耦合的通信机制[^1]。

#### 使用 `v-on` 绑定事件监听器

父组件可以使用 `v-on` 指令绑定一个处理函数到子组件上指定的自定义事件名称。当子组件内部发生某些逻辑并调用了 `$emit('eventName')` 后，就会触发这个处理函数。

<!-- ParentComponent.vue -->
<template>
  <div>
    <!-- 将名为 'greet' 的自定义事件绑定给 handleGreet 函数 -->
    <ChildComponent @greet="handleGreet"></ChildComponent>
  </div>
</template>

<script setup>
import { ref } from "vue";
import ChildComponent from "./ChildComponent.vue";

// 定义响应式的问候消息变量
const greetingMessage = ref("");

function handleGreet(message) {
  console.log(`Received message from child: ${message}`);
  greetingMessage.value = message;
}
</script>

#### 在子组件中发射事件

子组件内可通过 `this.$emit()` 或者组合式 API 下直接访问 emit 来发送带有参数的消息给父级组件。这里展示的是基于 `<script setup>` 的写法，在此模式下可以直接解构 props 和 emit。

<!-- ChildComponent.vue -->
<template>
  <button @click="sendGreeting">Send Greeting to Parent</button>
</template>

<script setup>
defineProps({
  /* 如果有来自父组件的数据传递 */
});

const emit = defineEmits(["greet"]);

function sendGreeting() {
  const msg = "Hello, this is a message from the child!";
  // 发射 greet 自定义事件并将字符串作为参数传送给父组件
  emit("greet", msg);
}
</script>

通过上述方式可以在不依赖于全局状态管理的情况下实现简单的双向数据流控制，并且保持良好的可维护性和扩展性。