vue3 子组件调用父组件函数

在Vue 3中，子组件想要调用父组件的函数，通常通过props、事件或者自定义hook（如`useRef`或`$emit`）来实现。以下是三种常见的方式：

1. **Props**：如果父组件有公共方法，并希望将其作为prop传递给子组件，子组件可以在需要的时候调用这个方法。例如：

// 父组件
export default {
  methods: {
    parentMethod() {
      // ...
    }
  },
  props: ['parentFunction'],
}

// 子组件
<template>
  <button @click="callParentMethod">调用父方法</button>
</template>

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  callParentMethod(); // 这里通过this.$parent.parentFunction();
});
</script>

2. **事件（Event Emitter）**：父组件可以发射一个自定义事件，子组件监听这个事件并执行相应操作。比如：

// 父组件
<template>
  <div>
    <child-component @parent-event="handleParentEvent" />
  </div>
</template>

<script>
export default {
  methods: {
    handleParentEvent(data) {
      // ...
    },
  },
}
</script>

// 子组件
methods: {
  callParentMethod() {
    this.$emit('parent-event', /* 参数 */);
  },
}

3. **自定义hook（useRef + $emit）**：如果数据不需要直接传递，可以使用Vue的`ref`配合`$emit`：

// 父组件
<script setup>
const parentFn = ref(null);
</script>

<template>
  <ChildComponent :parentFn="parentFn" />
</template>

// 子组件
<script setup>
import { onMounted, ref } from 'vue';

const callParent = () => {
  if (parentFn.value) {
    parentFn.value();
  }
};

onMounted(callParent);
</script>