vue3 父子组件交互，子组件调用父组件的方法

1、父组件代码

<template>
 <div class="container">
    父组件
    <br>
    <br>
    <a-button @click="handleClick">父组件调用子组件的方法</a-button>
    <a-divider />
    <Child :params="params" ref="childrenRefs" @childClick="parentClick"></Child>
 </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

import Child from "./Child.vue";
const params = reactive({
  title: "父组件给子组件传递的title",
  name: "父组件给子组件传递的name",
});
// 获取节点
const childrenRefs = ref()
// 父组件调用子组件的方法
function handleClick(){
    childrenRefs.value.fn()
}
// 给子组件绑定事件
function parentClick(){
    console.log('父组件的方法')
}
</script>

<style scoped>
.container {
    padding: 15px;
}
</style>

2、子组件代码

<template>
    <div>
        子组件
        <br>
        <br>
        <a-button @click="handleClick">子组件调用父组件的方法</a-button>
        <br>