vue3 setup中父组件通过Ref调用子组件的方法

在setup()钩子函数中调用

父组件

<template><div>
        我是父组件
        <childrenref="childrenRef"/><button@click="handleChildren">触发子组件</button></div></template><scriptlang="ts">import{ ref, defineComponent }from'vue'import Children from'./components/Children.vue';exportdefaultdefineComponent({components:{ Children }setup(){// ref的泛型除了指定any外 还可以指定<InstanceType<typeof Children>>const childrenRef = ref<any>();consthandleChildren=()=> childrenRef.value.isChildren();return{
                childrenRef,
                handleChildren
            }},})</script>

子组件：

<template><div>
    我是子组件
</div></template><scriptlang="ts">import{ defineComponent }from'vue'exportdefaultdefineComponent({setup(){constisChildren=()=>{
                console.log("我是子组件");}return{
                isChildren,}}})</script>

如果是在

setup()

钩子函数中使用，父组件通过

ref

获取到子组件实例后，直接

.value.函数名

即可调用子组件所定义的函数。其中ref的泛型可以指定

any

和

InstanceType<typeof Children>

在中调用

父组件

<template><div>
        我是父组件
        <childrenref="childrenRef"/><button@click="handleChildren1">触发子组件1</button><button@click="handleChildren2">触发子组件2</button></div></template><scriptsetuplang="ts">import{ ref }from'vue'import Children from'./components/Children.vue';const childrenRef = ref<InstanceType<typeof Children>>();consthandleChildren1=()=> childrenRef.value?.isChildren();consthandleChildren2=()=> childrenRef.value?.isChildren2();</script>

子组件

<template><div>
        我是子组件
    </div></template><scriptsetuplang="ts">import{ defineExpose }from'vue';constisChildren=()=>{
        console.log("我是子组件的第一个方法");}constisChildren2=()=>{
        console.log("我是子组件的第二个方法");}defineExpose({ isChildren, isChildren2 })</script>

在

<srcipt setup>

中调用和

setup()

钩子函数中调用不同的是：子组件中要通过

defineExpose

将方法暴露给父组件。

📃官网说明地址