Vue3 父组件调用子组件的方法

// 父组件

点击查看代码

<template>
    <div>　　　　　父页面
        <son-com ref="sonref"/>
        <button @click="handleSuccess">test</button>
    </div>
</template>

<script>
import {
  defineComponent,
  ref,
} from 'vue';

export default defineComponent({
    setup(){
　　　　const sonref = ref(null);
    　 const handleSuccess = () => {
       　　sonref.value.handle();
    　 }
　　return { sonref, handleSuccess } 　　
  } 
}) 
</script>


// 子组件
<template>
　　 <div>
        子页面
    </div>
</template>

<script>
import {
  defineComponent
} from 'vue';

export default defineComponent({
    setup(){　　　　
        const handle = () => console.log('handle success');
        return { 　　　　　　
            handle, // 别忘记 return子组件上的方法　　　
        } 　　
    }
}) 
</script>

vue3+ts

点击查看代码

将绑定在子组件上的ref变量，变为      const sonref = ref<any | HTMLElement>(null);