vue3子组件调父组件方法

本文主要是介绍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对应即可

这篇关于vue3子组件调父组件方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---