vue3父子组件传参之ref和$refsref ref用在子组件上，它的引用就指向了子组件的实例。可以通过实例来访问组件

ref

ref用在子组件上，它的引用就指向了子组件的实例。可以通过实例来访问组件的数据。

具体操作

子组件

首先我们知道，父组件是无法直接调用子组件中的函数的，因为子组件的函数默认是没有暴露出去的。因此需要使用defineExpose将函数暴露出去。

const clickLogin=function(){
    console.log('yes');
}
defineExpose({
    clickLogin
})

父组件

父组件需要获得子组件的实例，再调用方法。

<template>
   <panel-account ref="accountRef"/>
</template>

...
<script setup lang="ts">
//限制accountRef类型
const accountRef=ref<InstanceType<typeof panelAccount>>()
//在父组件函数里调用子组件函数
const LoginActive = function () {
    if (activeName.value == 'first') {
        console.log('账号登录！');
        accountRef.value.clickLogin();

    } else {
        console.log('手机登录！')
    }

}
</script>

点击登录后，可以看到调用成功。