vue3+ts 如何使用将子组件通过ref使用

在 vue3 中，父组件仍然可以通过以下方式访问子组件实例（以 element-plus 的 tree 组件为例）

<template>
    <el-tree ref="tree"></el-tree>
</template>

<script>
export default {
    mounted() {
        let tree = this.$refs.tree;
        // tree.getCurrentNode();
        console.log(tree)
    }
}
</script>

但是总感觉哪里不对，毕竟不是在setup中，没用上vue3的新特性。那么可以修改为以下方式

<template>
    <el-tree ref="tree"></el-tree>
</template>

<script>
export default {
    setup() {
        let tree = ref(null);
        // tree.value.getCurrentNode();
        return {
            tree
        }
    }
}
</script>

Notice: setup里的变量名，需要与template中ref的值一致。

JS如此，那么 TS 应该怎么样呢？

<template>
    <el-tree ref="tree"></el-tree>
</template>

<script lang="ts">
import { defineComponent, Ref, ref } from 'vue'
import ElTree from "element-plus/lib/el-tree"
export default defineComponent({
    setup() {
        let tree: Ref<InstanceType<typeof ElTree> | null> = ref(null);
        // tree.value.getCurrentNode();
        return {
            tree
        }
    }
})
</script>

这里用上了 TS 的 InstanceType（获取构造函数的实例类型） 方法