【vue3】入门系列—子组件调父组件方法

在 Vue 3 中，子组件通常不会直接调用父组件的方法，因为这同样违反了组件之间的单向数据流原则。然而，你可以通过$emit方式实现子组件通知父组件并执行某些操作：
父组件
子组件可以通过 $emit 触发一个自定义事件，并传递参数给父组件。父组件在模板中监听这个事件，并在事件触发时执行相应的方法。

<template>
    <div>
        <selectDate @get-data="getDataListFn"/>
    </div>
</template>
<script lang="ts" setup>
import selectDate from "@/views/dataStatistic/children/selectDate.vue";

const getDataListFn = async (data: any) => {
	// 从子组件传过来的数据
    console.log(data)  // {name: 'ying'}
}
</script>

子组件

import { defineEmits } from "vue";
emit('getData', {name: 'ying'}});

const emit = defineEmits<{
  (e: 'getData', data: any): void;
}>();

子组件的getData和父组件的@get-data对应即可