vue3中父组件如何调用子组件中的方法

在vue2中：

我们通常使用this.$refs.childNode.clickButton()调用子组件方法。
子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法

1. 子组件中的方法mychild

 show() {
     console.log('子组件的show方法被调用了')      
},

2. 父组件

<template>
    <my-child ref="getRef" type="submit" />
</template>
<script>
getChild(){
   console.log('父组件的getChild被调用了')
   this.$refs.uploadRef.show();
},
</script>

此时就可以看到信息

vue3中

1.父组件

<template>
    <div class="parent">
        <button @click="getChild">触发子组件方法</button>
        <!-- 1. 定义ref -->
        <child ref="childRef"></child>
    </div>
</template>
<script lang="ts" stup>
    import { defineComponent, ref } from "vue";
    import child from "@/components/child.vue";
 
    // 2. 定义与ref同名变量
    const childRef = ref<any>();
    const getChild = () => {
        childRef.value.childFun();
    }
</script>

2.1 子组件 scrip setup 写法

其实和vue2差不多，最重要一点就是要在子组件中将父组件需要调用的方法，使用defineExpose({myfunc})进行导出，才能调用，不然会报错.

<template>
    <div class="child">
    </div>
</template>
<script lang="ts" stup>
 
 const childFun = () => {
     console.log('已触发组件方法');
 }
 
 //关键点 把 方法暴露给父组件
 defineExpose({open})
 
</script>

2.2子组件 defineComponent 写法

<template>
    <div class="child">
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
 
 
export default defineComponent({
    setup() {
        // 子组件的方法
        const childFun = () => {
            console.log('已触发组件方法');
        }
        return {
            childFun
        };
    },
   
});
</script>